JQueryの変更とキーアップイベントハンドラ

Question

私のアプリケーションでJQuery、CakePHP、およびMysqlを使用しています。 私は以下のようなコードを持っています。指示は、入力時に表示パネルに表示されるテキストボックスです。

$(".TextFieldSettings #instructions").keyup(function(){ 
    instr=$(".TextFieldSettings #instructions").val(); 
    $("#displayPanel .fieldInstructions"+counter).html(instr).show(); 
});//Text field instructions keyup 

このコードはうまく機能します。

編集： テキストボックスの指示の値を変更すると、表示パネルにキーアップ値が表示されている必要があります。データベースに挿入するためにinstrで最後に変更された値が必要なのです。 どうすればいいですか？あなたの操作を遅らせることができ

Answer 1

：

$(".TextFieldSettings #instructions").keyup(function(){ 
    setTimeout(function() { 
    var instr=$(".TextFieldSettings #instructions").val(); 
    $("#displayPanel .fieldInstructions"+counter).html(instr).show(); 
    }, 1); 
});//Text field instructions keyup 

そのように機能が実行された場合、入力値は、キー入力で更新されました。

Answer 2

あなたの指示が保持しているか、どれくらいの頻度でキーを押されているかによって、キーアップごとにデータベースを更新するのはちょっと不合理です。データベースを5秒ごとに更新するかもしれませんか？各キーを押すとsetTimeout機能が起動/リセットされます。

また、$（this）でテキスト値を引き出すためにあなたの呼び出しを置き換えることができます。

$(".TextFieldSettings #instructions").keyup(function(){ 
    var instr = $(this).val(); 
    $("#displayPanel .fieldInstructions"+counter).html(instr).show(); 

    // Update database 
    $.ajax({ 
       method: 'POST', 
       url: 'path/to/a/script_file/executing_the_sql.ext', 
       data: { 'str': escape(instr.replace(/\n/g,'<br />')) }, 
       success: function(){}, 
       error: function(e){ alert(e.responseText); } 
    }); 

});//Text field instructions keyup