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

Question

我的网站上有一个大表格，我希望能够在用户填写数据库时自动保存到数据库。与输入文档时google驱动器的工作方式几乎完全相同。

我正在尝试不使用每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;
  });

Answer 1

去除textarea的变化。

演示：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

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毫秒后保存。

它还具有让用户知道更改已保存的状态。

Answer 3

尝试Sisyphus.js https://github.com/simsalabim/sisyphus。它将表单数据保存在浏览器的本地存储中，并且可以很好地防止关闭标签，浏览器崩溃等...