监听输入框

想要实时监听输入框的数据，可以有以下几种方法：

1 oninput方法

---

body>
<label><input id="input" type="text"></label>
<p title="选择你最喜欢的水果？">输入的内容：<span id="text"></span></p>

<script>
$('#input').on('input',function(){
  $('#text').text($(this).val())
});
</script>

oninput 事件在用户输入时触发。
该事件在 或 元素的值发生改变时触发。

该事件类似于 onchange 事件。不同之处在于 oninput 事件在元素值发生变化是立即触发， onchange 在元素失去焦点时触发。另外一点不同是 onchange 事件也可以作用于 和 元素。

这种方法是比较完美的方法，只要输入框的值发生变化就会导致事件发生，同步发生并且支持键盘、鼠标操作。

2 keyup方法

---

$('#input').on('keyup',function(){
  $('#text').text($(this).val())
});

完整的 key press 过程分为两个部分，按键被按下，然后按键被松开并复位。
当按钮被松开时，发生 keyup 事件。它发生在当前获得焦点的元素上。
keyup() 方法触发 keyup 事件，或规定当发生 keyup 事件时运行的函数。

在实时监听输入框的过程中，keyup是比较适合的，keydown和keypress会有一个字符的延迟。

但是keyup也有一个问题，对纯鼠标粘贴过来的文字变化并不会触发事件。

3 change方法

---

$('#input').on('change',function(){
  $('#text').text($(this).val())
});

当元素的值发生改变时，会发生 change 事件。
该事件仅适用于文本域（text field），以及 textarea 和 select 元素。

change() 函数触发 change 事件，或规定当发生 change 事件时运行的函数。

注释：当用于 select 元素时，change 事件会在选择某个选项时发生。当用于 text field 或 text area 时，该事件会在元素失去焦点时发生。

这种方法的缺点是只有在失去焦点后才会触发事件，所以不是实时的。

参考

• http://www.w3school.com.cn/jquery/event_change.asp
• http://www.w3school.com.cn/jquery/event_keypress.asp
• http://www.runoob.com/jsref/event-oninput.html