web-dev-qa-db-ja.com

入力の一時停止中に入力ボックスをデータベースに自動保存しますか？

ユーザーがデータベースに入力するときにデータベースに自動保存できるようにしたい、私のWebサイトに大きなフォームがあります。ドキュメントを入力するときの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;
  });
javascriptjqueryautosave
27
bryan

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

47
MLM

私はこの質問が古いことを知っていますが、私が最も好きなコードを含めたいと思います。私はそれをここで見つけました： 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ミリ秒以上書き込みを停止した後に保存されます。

また、変更が保存されたかどうかをユーザーに知らせるステータスもあります。

6
Claudio Shigueo Watanabe

Sisyphus.js https://github.com/simsalabim/sisyphus を試してください。ブラウザのローカルストレージにフォームデータを保持し、タブのクローズ、ブラウザのクラッシュなどに対して堅牢です...

0
spitz