JavaScript中textInput事件详解（事件对象及与keypress事件的区别）

textInput 事件

textInput 事件是 DOM3 级事件中新加的事件，当用户在可编辑区域中输入字符时，就会触发这个事件。

---

textInput 和 keypress 区别

textInput 事件与 keypress 事件类似，但还是有一些区别：

1. 任何可以获得焦点的元素都可以触发 keypress 事件，但只有可编辑区域才能触发 textInput 事件。
2. textInput 事件只有在用户按下能够输入实际字符的键时才会被触发；而 keypress 事件则在按下那些能够影响文本显示的键时也能触发（例如退格键）。

---

textInput 事件对象

data 属性

textInput 事件对象中有一个 data 属性，这个属性的值就是用户输入的字符（而非字符编码）。换句话说，用户在没有按上档键的情况下按下了 S 键，data 的值就是 ‘s’ ，而如果按下了上档键，data 的值就是 ‘S’ 。

例如：

var textbox = document.getElementById('myText');
EventUtil.addHandler(textbox, 'textInput', function(event) {
    event = EventUtil.getEvent(event);
    alert(event.data);
});

另：
通过本人实践证明，data 中不只是可以存字符，也可以是字符串。它会把一次性输入到文本域中的所有内容都保存在 data 属性中。

inputMethod

event 对象上还有一个属性叫 inputMethod，表示把文本输入到文本框中的方式。（只有 IE 支持）
可取值：

• 0，表示浏览器不确定是怎样输入的。
• 1，表示是使用键盘输入的。
• 2，表示文本是粘贴进来的。
• 3，表示文本是拖放进来的。
• 4，表示文本是用 IME 输入的。
• 5，表示文本是通过在表单中选择某一项输入的。
• 6，表示文本是通过手写输入的（比如手写笔）。
• 7，表示文本是通过语音输入的。
• 8，表示文本是通过几种方法组合输入的。
• 9，表示文本是通过脚本输入的。