在键入暂停期间自动将输入框保存到数据库
Autosave input box's to database during pause in typing?
我的网站上有一个大表单,我希望能够在用户填写时自动保存到数据库中。几乎与输入文档时的谷歌云端硬盘的工作方式相同。
我试图不让一个每 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;
});
取消文本区域更改。
演示: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
我知道
这个问题很老,但我想包含一个我最喜欢的代码。我在这里找到了它: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 毫秒后保存。
它还具有一个状态,让用户知道更改是否已保存。
试试西西弗斯.js https://github.com/simsalabim/sisyphus。它将表单数据保留在浏览器的本地存储中,并且对选项卡关闭、浏览器崩溃等具有鲁棒性......
相关文章:
- 输入框值将保存到 MySQL 数据库
- 如何在视图中保存用户输入内容,并在离开页面时对控制器进行后期调用
- 将表单输入保存到txt,弹出结果,不更改页面
- 离子将输入保存为变量
- 将键盘输入保存到变量中
- 如何将jQuery克隆的文本输入保存到cookie或html5存储中
- PHP/MySQL:将用户输入保存到数据库
- 我正在尝试将javascript文本框的输入保存回服务器.我想从保存的弹出文本框中获得输入,以重命名文件夹
- 如何将提示输入保存到数组中
- 如何将文本输入保存为变量,然后提交到服务器(ajax 和 javascript)
- 将输入保存到 Parse (Javascript) 中
- 使用 HTML/JS 将输入保存到文本文件
- 将多个用户输入保存到本地存储中
- Angularjs将表单输入保存到php和Mysql
- 如何在JavaScript中将用户输入保存到变量中
- 将用户输入保存到段落中
- 如何将用户输入保存到HTML和JavaScript中的变量中
- 如何使用ColdFusion将表单输入保存到会话变量中
- 如何允许浏览器将文本输入保存为密码
- Web文本输入保存到数据库中,无需表单-Django Javascript