keydown、keypress和textInput的用法 — 第13.4.4节

keydown、keypress和textInput的用法

##
一：键盘事件的用法？
   “DOM3级事件”为键盘事件制定了规范，有3个键盘事件：
1. keydown：当用户按下任意键的时候触发。如果按住不放会重复触发；
2. keypress：当用户按下键盘上字符键时触发，如果按住不放会重复触发，另外按下esc键也会触发这个事件；
3. keyup：当用户释放键盘上的键的时候触发。

• 当按下键盘上的字符键时，首先触发keydown事件，然后紧跟着是keypress事件，最后会触发keyup事件，其中keydown和keypress都是在文本框发生之前被触发的，而keyup是在文本框发生变化后被触发的。
• 当用户按下的是非字符键的时候，那么会触发keydown事件，然后就是keyup事件。不会触发keypress事件。

二：event对象中的键码（keycode）？
  与事件keydown对应的event对象属性就是keycode；当我们按下相应的按键的时候，对应的键码与ASCII码中对应的键码相同。

    EventUtil.addHandler(textbox,'keydown',function(event){
        event = EventUtil.getEvent(event);
        console.log(event.keyCode);
    })
    EventUtil.addHandler(textbox,'keypress',function(event){
        event = EventUtil.getEvent(event);
        console.log(event.keyCode);
    })

三：字符编码？
   发生keypress事件意味着按下的键会影响到屏幕中文本的显示。IE9、Firefox、Chrome、和Safari的event对象都支持一个charCode属性，这个属性只有在发生keypress事件时才会有值，即ASCII编码的值，此时的keyCode可能是0或者键码。但是IE8及之前的版本和opera是在keyCode中保存字符的ASCII编码。因此EventUtil对象中可以加上getCharCode方法，用来检测charCode是否可用。如果不能用就是用keyCode。

var EventUtil = {
    //其他代码在地址：http://blog.csdn.net/flyingpig2016/article/details/53392688
    getCharCode:function(event){
        if(typeof event.charCode == "number"){
            return event.charCode;
        }else{
            return event.keyCode;
        }
    }

用法如下：

    EventUtil.addHandler(textbox,'keypress',function(event){
        event = EventUtil.getEvent(event);
        console.log(EventUtil.getCharCode(event));
    })

四：textInput事件？
  ”DOM3级事件”规范中引入了一个新的事件，名叫textInput。IE9+、Safari和Chrome支持该事件。当用户在可编辑区中输入字符的时候，就会触发这个事件。这个事件用来替代keypress，但是和keypress不同的是：

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

1.textInput的event对象包含一个data属性。这个属性就是用户输入的字符。
实例如下：

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

2.textInput的event对象包含一个inputMethod属性只有（IE支持）。顾名思义，用来说明字符展示的方法，它的码语对应关系为：

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