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

我的网站上有一个大表格，我希望能够在用户填写数据库时自动保存到数据库。 与键入文档时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发送数据然后返回状态（保存，保存等）。

演示完整forms和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 。 它将表单数据保存在浏览器的本地存储中，并且可以很好地防止关闭选项卡，浏览器崩溃等…