jQuery 打字暂停期间将输入框自动保存到数据库？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19910843/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Autosave input box's to database during pause in typing?
提问by bryan
I have a large form on my website that I want to be able to autosave to a database as the user is filling it out. Almost identical to how google drive works when typing a document.
我的网站上有一个大表单，我希望能够在用户填写时自动保存到数据库中。几乎与输入文档时谷歌驱动器的工作方式相同。
I am trying not to have a function that runs every X seconds but rather a function that runs when the user has taken a break in typing. So, if the user has not typed in 1 hour but is still on the page, it doesn't keep pushing save requests.
我试图没有一个每 X 秒运行一次的函数，而是一个在用户打字休息时运行的函数。所以，如果用户在 1 小时内没有输入但仍在页面上，它不会继续推送保存请求。
This is all I have so far which is a basic javascript form submit.
到目前为止，这是一个基本的 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;
});
回答by MLM
Debounce the textarea change.
去抖动 textarea 更改。
Demo: jsFiddle
演示：jsFiddle
Put your ajax call in the saveToDB()function. These event names('input propertychange change') will trigger on any form element change such as radio buttons, inputs, etc.
将您的 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');
}
Here is a full demo showing you how to debounce a full form and use ajax to send the data and then return the status (Saving, Saved, etc).
这是一个完整的演示，向您展示如何对完整表单进行去抖动并使用 ajax 发送数据，然后返回状态（正在保存、已保存等）。
Demo full form and ajax: jsFiddle
演示完整表单和ajax：jsFiddle
回答by Claudio Shigueo Watanabe
I know that this question is old, but I would like to include a code that I like the most. I found it here: http://codetunnel.io/how-to-implement-autosave-in-your-web-app/
我知道这个问题很老，但我想包括一个我最喜欢的代码。我在这里找到它：http: //codetunnel.io/how-to-implement-autosave-in-your-web-app/
Here is the code:
这是代码：
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);
});
It saves after the user stops writing for more than 750 milliseconds.
它在用户停止写入超过 750 毫秒后保存。
It also has a status letting the user know that the changes have been saved or not.
它还有一个状态让用户知道更改是否已保存。
回答by spitz
Try Sisyphus.js https://github.com/simsalabim/sisyphus. It persists the form data in the browser's local storage and is robust against tabs closing, browser crashes, etc...
试试 Sisyphus.js https://github.com/simsalabim/sisyphus。它将表单数据保存在浏览器的本地存储中，并且对选项卡关闭、浏览器崩溃等具有强大的抵抗力...
