如何立即知道textarea中的数据发生了变化？

Question

我正在制作一个带有用户可以更改的文本区域的页面。

知道用户已完成在其中输入数据并且我可以发送其中内容的最佳方式是什么？

我试过使用jQuery.change()函数，但我发现它有点不可靠，因为它只有在用户输入完数据后点击某些东西后才会触发（所以有一些情况当输入的数据不会被注册时（比如用户按 F5）

Answer 1

你试过blur()了吗？但我怀疑你能否准确地确定用户完成输入数据，同时防止他在不保存输入数据的情况下离开（或重新加载）。

您可以使用键盘事件将数据保存在存储中，并在重新加载页面后重新加载数据。但我不会那样做将数据发送到服务器。这将是一个巨大的流量来源。

Answer 2

如果您想知道用户何时完成某个字段，请尝试 focusOut()。

The focusout event is sent to an element when it, or any element inside of it, loses focus.

尝试在字段中输入任意单词或句子，然后在文本区域外单击，看看会发生什么。

$('#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() 就可以了。

The keyup event is sent to an element when the user releases a key on the keyboard. It can be attached to any element, but the event is only sent to the element that has the focus. Focusable elements can vary between browsers, but form elements can always get focus so are reasonable candidates for this event type.

$('#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 事件。它经常用于自动完成等。

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

jsFiddle example

如何立即知道textarea中的数据发生了变化？

How to immediately know that data in textarea has changed?

javascript

jquery

onchange