在输入暂停期间将输入框自动保存到数据库？

Question

我在我的网站上有一个大型表单，希望能够在用户填写时自动保存到数据库中。类似于谷歌文档在输入文档时的方式。

我不想每隔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;
  });

- bryan

---

@MilchePatern 已修复，抱歉造成困扰。 - bryan

Answer 1

防抖文本区域更改。

演示：jsFiddle

将您的ajax调用放在saveToDB()函数中。这些事件名称（'input propertychange change'）将在任何表单元素更改时触发，例如单选按钮、输入等。

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发送数据，然后返回状态（保存中、已保存等）。

演示完整表单和ajax：jsFiddle

- MLM

---

我同意你关于超时的观点，但你需要将其绑定到整个表单，而不仅仅是一个文本区域。 - Blake Plumb

@MLM，你能否给我一个使用防抖的例子吗？ - bryan

@bryan 更新了答案。请查看 Ajax 演示。 - MLM

@bryan 两个完整表单的演示已更新，以适应单选框和复选框。 - MLM

@MLM感谢您提供的好解决方案...我尝试了一下，但似乎没有将文本区域中的数据发送出去。它发送了除文本区域外的所有字段。 - Wes

Answer 2

我知道这个问题比较老，但我想分享我最喜欢的一段代码。我在这里找到了它：http://codetunnel.io/how-to-implement-autosave-in-your-web-app/

以下是代码：

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毫秒时，它会自动保存。

同时，它还有一个状态指示用户更改是否已经保存。

- Claudio Shigueo Watanabe

---

当选中并删除或使用退格键删除注释时，它无法正常工作。 - Mukesh Kumar

它可以工作，但我必须基于按键和失焦触发事件，以便文本区域的最后一个字母也被保存：$commentBox.on('keyup blur', function () { .... } - Paul Noon

Answer 3

尝试使用 Sisyphus.js https://github.com/simsalabim/sisyphus。它可以将表单数据持久化到浏览器的本地存储中，并且能够抵御选项卡关闭、浏览器崩溃等情况。

- spitz

---

这个解决方案与问题无关。将数据保存到本地存储并不会发出HTTP请求，也不能解决更新数据库的问题。 - J.Arturo Covarrubias