Javascript 自动保存输入框'；在暂停键入期间，是否将数据传输到数据库？

我在我的网站上有一个大表单，我希望能够在用户填写表单时自动保存到数据库中。几乎与谷歌硬盘在键入文档时的工作方式相同

我尝试的不是一个每X秒运行一次的函数，而是一个当用户在打字时暂停时运行的函数。因此，如果用户在1小时内没有输入，但仍在页面上，则不会继续推送保存请求

到目前为止，我只有一个基本的javascript表单提交

$("#page1Form").submit(function(event){
  event.preventDefault();  
  $changesSaved.text("Saving...");
  var url = "/backend/forms/page1-POST.php";
        $.ajax({
         type: "POST",
         url: url,
         data: $("#page1Form").serialize(),
         success: function(data) { $changesSaved.text(data); }
        });
  return false;
  });

---

取消对文本区域的影响

演示： 将ajax调用放入

saveToDB（）

函数中。这些事件名称（

“输入属性更改”

）将在任何表单元素更改（如单选按钮、输入等）时触发

var timeoutId;
$('#the-textarea').on('input propertychange change', function() {
    console.log('Textarea Change');

    clearTimeout(timeoutId);
    timeoutId = setTimeout(function() {
        // Runs 1 second (1000 ms) after the last change    
        saveToDB();
    }, 1000);
});

function saveToDB()
{
    console.log('Saving to the db');    
}

---

下面是一个完整的演示，向您展示了如何取消对完整表单的绑定，并使用ajax发送数据，然后返回状态（Saving、Saved等）

---

演示完整表单和ajax:试试Sisyphus.js。它将表单数据持久保存在浏览器的本地存储中，并且对选项卡关闭、浏览器崩溃等具有很强的鲁棒性

我知道这个问题很老，但我想包括一个我最喜欢的代码。我在这里找到的：

代码如下：

var $status = $('#status'),
    $commentBox = $('#commentBox'),
    timeoutId;

$commentBox.keypress(function () {
    $status.attr('class', 'pending').text('changes pending');

    // If a timer was already started, clear it.
    if (timeoutId) clearTimeout(timeoutId);

    // Set timer that will save comment when it fires.
    timeoutId = setTimeout(function () {
        // Make ajax call to save data.
        $status.attr('class', 'saved').text('changes saved');
    }, 750);
});

它在用户停止写入超过750毫秒后保存

---

它还有一个状态，让用户知道更改是否已保存。

@Milchepaten修复，很抱歉我同意你的超时，但你需要将其绑定到整个表单，而不仅仅是文本区域。这是一个很棒的传销，正是我所期望的。感谢您的建议@BlakePlumb我一定会修改它。@bryan用完整形式的解决方案更新了我的答案。@bryan更新了答案。查看ajaxdemo@MLM谢谢你的伟大解决方案。。。我试过了，但它似乎没有发送文本区域中的数据。它发送除textarea之外的所有字段。此解决方案与问题无关。Save to local Storage（保存到本地存储）不会发出Http请求，也不会解决更新到数据库的问题。当注释被选中+删除或退格时，它不起作用。它起作用，但我必须基于按键和模糊触发事件，以便还保存文本区域的最后一个字母：$commentBox.on（'keyup blur'，function（）{…}