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：通過腳本輸入的。