如何立即知道textarea中的數據已更改？

Question

我制作了一個帶有用戶可以更改的textarea的頁面。

知道用戶已完成向其中輸入數據並發送內容的最佳方式是什么？

我嘗試使用jQuery .change（）函數，但是我發現它有點不可靠，因為它僅在用戶完成輸入數據后單擊某事后才觸發（因此在某些情況下，輸入的數據將不會被注冊（例如如果用戶按F5鍵）

Answer 1

您是否嘗試過blur（） ？ 但是我懷疑您是否可以確定用戶是否已經完成輸入數據，同時又可以防止用戶離開側邊（或重新加載）而不保存輸入數據。

您可以使用鍵盤事件將數據保存在存儲器中，並在重新加載頁面后重新加載數據。 但是我不會那樣做來將數據發送到服務器。 這將是巨大的流量來源。

Answer 2

如果您想知道用戶何時完成一個字段，請嘗試focusOut() 。

當聚焦事件或其中的任何元素失去焦點時，會將聚焦事件發送到該元素。

嘗試在該字段中輸入任何隨機單詞或句子，然后在文本區域之外單擊並查看會發生什么。

 $('#textarea1').focusout(function(){ //Your action code goes here! alert($('#textarea1').val()); }); 

 #textarea1 { width:500px; height:150px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <textarea id="textarea1"></textarea> 

編輯：糟糕，這與OP試圖解決的問題相同。 所以keyup()會做。

當用戶釋放鍵盤上的鍵時，會將keyup事件發送到元素。 它可以附加到任何元素，但是事件僅發送到具有焦點的元素。 在瀏覽器之間，可聚焦元素可以有所不同，但是表單元素可以始終獲得焦點，因此是此事件類型的合理候選對象。

 $('#textarea1').keyup(function(){ //Your action code goes here! $('#textval').text($('#textarea1').val()); }); 

 #textarea1 { width:500px; height:150px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <textarea id="textarea1"></textarea> <div id="finalval">The value is <span id="textval">unset</span></div> 

Answer 3

如果要在每次按鍵時觸發input事件，則可以使用input事件。 它通常用於自動完成等。

$(document).on('input', '#yourElement', function () {
    console.log("Input has changed!");
});

jsFiddle示例