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