javaScript事件(七)事件類型之鍵盤與文本事件


鍵盤事件如下:

  • 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事件(一)事件流

javaScript事件(二)事件處理程序

javaScript事件(三)事件對象

javaScript事件(四)event的公共成員(屬性和方法)

javaScript事件(五)事件類型之鼠標事件 

 

本文作者starof,因知識本身在變化,作者也在不斷學習成長,文章內容也不定時更新,為避免誤導讀者,方便追根溯源,請諸位轉載注明出處:http://www.cnblogs.com/starof/p/6558581.html有問題歡迎與我討論,共同進步。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM