鍵盤事件如下:
- keydown:當用戶按下鍵盤上的任意鍵時觸發,而且如果按住不放的話,會重復觸發此事件。
- keypress:當用戶按下鍵盤上的字符鍵時觸發,而且如果按住不放的話,會重復觸發此事件。
- keyup:當用戶釋放鍵盤上的鍵時觸發。
只有一個文本事件:textInput。textInput是對keypress的補充,用意是在將文本顯示給用戶之前更容易攔截文本。在文本插入文本框之前會觸發textInput事件。
解釋:
當用戶按下一個鍵盤上的字符鍵時,首先會觸發keydown事件,然后緊跟着是keypress事件,最后會觸發keyup事件。
keydown和kepress都是在文本框發生變化之前觸發的,keyup事件則是在文本框已經發生變化之后觸發的。
如果用戶按下一個字符鍵不放,就會重復觸發keydown和keypress事件,直到用戶松開該鍵為止。
如果用戶按下的是一個非字符鍵,那么首先會觸發keydown事件,然后就是keyup事件。如果按住這個非字符鍵不放,那么就會一直重復觸發keydown事件,直到用戶松開這個鍵,此時會觸發keyup事件。
1、鍵碼
keydown和keyup事件發生時,evnet對象的keyCode屬性中會包含一個代碼,與鍵盤上一個特定的鍵對應。
var textbox=document.getElementById("myText"); EventUtil.addHandler(textbox,"keyup",function(event){ event=EventUtil.getEvent(event); console.log(event.keyCode); });
兼容性:在Firefox和Opera中,按分號鍵時keyCode值為59,也就是ASCII中分號的編碼;但IE和Safari返回186,即鍵盤中按鍵的鍵碼。
2、字符編碼
IE9,Firefox,Chrome和Safari的event對象支持charCode 屬性,charCode只有發生keypress事件時才包含值,該值是按下那個鍵所代表字符的ASCII編碼。
兼容性:
IE8及之前版本中Opera是在keyCode中保存字符的ASCII編碼。
檢查charCode屬性是否可用,不可用則使用keyCode。
getCharCode:function(event){ if(typeof event.charCode=="number"){//在不支持的瀏覽器中值是undefined return event.charCode; }else{ return event.keyCode; } }
在取得了字符編碼之后,就可以使用String.fromCharCode()將其轉換成實際的字符。
3、DOM3級變化
DOM3中鍵盤事件不再包含charCode,而是包含2個新屬性:key和char。
key是為了取代keyCode新增的,它的值是一個字符串。按下字符鍵(比如"M"),key的值就是相應的文本字符"M";按下非字符鍵時,key的值就是相應的鍵名(比如"Shift"或“Down”)。
char屬性在按下字符鍵時行為與key相同,但在按下非字符鍵時值為null。
存在兼容性,不推薦用。
4、textInput事件(DOM3事件)
用戶在可編輯區域中輸入字符時,就會觸發這個事件。
textInput用來代替keypress,二者區別:
- 任何可以獲得焦點的元素都可以觸發keypress事件,但只有可編輯區域才能觸發textInput事件。
- textInput事件只會在用戶按下能夠輸入實際字符的鍵時才會觸發,而keypress事件則在按下那些能夠影響文本顯示的鍵時也會觸發(比如退格鍵)。
data屬性
textInput事件主要考慮的是字符,因此它的event對象中還包含一個data屬性,data值為用戶輸入的字符。
- 用戶按下S鍵,data值就是“s”
- 用戶按下上檔鍵時按下S鍵,data值就是"S"
EventUtil.addHandler(textbox,"textInput",function(event){ event=EventUtil.getEvent(event); console.log(event.data); });
inputMethod屬性
另外,event對象上還有一個屬性,叫inputMethod,表示文本輸入到文本框中的方式。使用這個屬性可以確定文本是如何輸入到控件中,從而驗證其有效性。
- 0,表示瀏覽器不確定是怎么輸入的
- 1,表示是使用鍵盤輸入的
- 2,表示文本是粘貼進來的
- 3,表示文本是拖放進來的
- 4,表示文本是使用IME輸入的
- 5,表示文本是通過在表單中選擇某一項輸入的
- 6,表示文本是通過手寫輸入的(比如使用手寫筆)
- 7,表示文本是通過語音輸入的
- 8,表示文本是通過集中方法組合輸入的
- 9,表示文本是通過腳本輸入的
兼容性:支持textInput屬性的瀏覽器有IE9+,Safari和Chrome,只有IE支持inputMethod屬性。
擴展閱讀:
javaScript事件(四)event的公共成員(屬性和方法)
本文作者starof,因知識本身在變化,作者也在不斷學習成長,文章內容也不定時更新,為避免誤導讀者,方便追根溯源,請諸位轉載注明出處:http://www.cnblogs.com/starof/p/6558581.html有問題歡迎與我討論,共同進步。