鍵盤與文本事件

《javascript高級程序設計》 13.4.4  ---鍵盤與文本事件  筆記

1、鍵盤事件

  1. 有3個鍵盤事件

     keydown  當用戶按下鍵盤上的任意鍵時觸發，並且若是按住不放的話。會重複觸發此事件

     keypress   當用戶按下鍵盤上的字符鍵時觸發，並且若是按住不入的話，會重複觸發此事件、按下Esc鍵也會觸發這個事件。Safari3.1以前的版本也會在用戶按下非字符鍵時觸發些事件

    keyup  當用戶釋放鍵盤的時觸發

  2. 有一個文本事件

    textInput  是對keypress的補充，用意是將文本顯示給用戶以前更容易攔截文本，在文本插入文本框以前就能觸發textInput事件

  3. 在用戶按下鍵盤上的字符鍵時，會依次觸發 keydown ---> keypress ---> keyup ;   keydown,keypress都是在文本框發生變化以前觸發的，keyup是在文本框變化以後觸發的,當用戶按住一個鍵不放時，會重複觸發keydown與keypress事件

    在鍵盤上按下一個非字符鍵時，會依次觸發keydown --->  keyup 若是按住非字符鍵不放，會重複觸發keydown事件

4. 鍵盤事件支持修改鍵 shiftKey,ctrlKey,altKey,metaKey(IE不支持)

 

2、鍵盤事件其餘信息

  1.  鍵碼  在發生keydown,keyup事件時，event對象的keyCode屬性會包含一個代碼。與sfhift鍵的狀態無關

      keypress事件對象中沒有keyCode屬性

  2. 字符編碼  發生keypress事件，DOM3級事件規範，event對象中有一個charCode屬性。這個屬性只有在發生keypress事件時才包含值，並且這個值是按下的那個鍵所表明字符的ASCII編碼

  3.  DOM3級變化

     DOM3級鍵盤事件再也不包含charCode屬性，而是包含兩個key與char屬性

     key  是爲了取代keyCode，返回的是一個字符串，在按下某個字符鍵時，key的值就是相應的文本字符，在按下非字符鍵時，就是相應鍵的名。

    char  行爲與key相同，但按下非字符鍵時的值爲null

   IE9+支持key屬性，但不支持char屬性， safari5+ 與chrome支持名爲keyIdentifier的屬性，在按下非字符鍵的狀況下與key的值相同，對於字符鍵，keyIdentifier返回一個格式相似U+0000的字符串，表示Unicode值

  location屬性，是一個數值，表示按下了什麼位置上的鍵

      0 ---- 默認鍵盤   1 ---  左側位置（左位的Alt鍵）   2 ---- 右側位置（右側的Shift鍵）   3 ---- 數字小鍵盤

      4 ---- 移動設備鍵盤（虛擬鍵盤）  5 ---- 手柄（如任天堂Wii控制器）

      IE9支持這個屬性 safari與chrome支持名爲keyLocation的等價屬性。但即有Bug  值始終是0  除非按下了數字鍵盤（此時，值爲3） ，不然，不會是一、二、四、5  （chrome30,ff 支持 DOM的location，opera16,safari5.17不支持)

   getModifierState()方法，接受一個參數，即Shift,Control,AltGraph,Meta的字符串，表示要檢測的修改鍵，若是處於被按下的狀態，會返回true，不然爲false（IE9+，chrome30,FF24支持,safari5.1.7,opera16不支持）

 

3、文本事件

  textInput事件，當用戶在可編輯區域中輸入字符時，就會觸發這個事件，與keypress的區別在於

   1.  textInput只能在可編輯區域才能觸發，keypress能夠在任意可獲得焦點的元素上觸發

   2.  textInput只會在用戶按下可以輸入實際字符的鍵時纔會觸發，keypress在按下那些可以影響文本顯示的鍵時也會觸發（例如退格鍵）

textInput事件的event對象有一個data屬性，這個屬性的值就是用戶輸入的字符（不是字符編碼）,與大小寫有關

textInput事件的event對象有一個inputMethod屬性，表示把文本輸入到文本框中的方式

   0 ---- 瀏覽器不肯定是怎麼輸入的      1 ------ 使用鍵盤輸入的                  2 ---- 文本是粘貼進來的

   3 ---- 文本是拖放進來的        4 ------ 文本是使用IME輸入的         5 ---- 文本是經過在表單中選擇某一項輸入的

    6 ---- 文本是經過手寫輸入的   7 ----- 文本是經過語言輸入的          8 ----  文本是經過幾種方法組合輸入的

   9 ------ 文本是經過腳本輸入的

  只有IE支持inputMethod