【瀏覽器兼容】獲取按鍵值

你常常需要做的兩件事:監聽用戶按下了哪一個鍵和當前事件的對象,IEFireFox的實現是不同的。下面是常見的一種寫法:

function listenEventAndCode(e){

var code=null;

if(!e)

  e=window.event;

if(e.keyCode)

  code=e.keyCode;

else if(e.which)

code=e.which;

//do something here;

下面是調用示例:

<div οnkeypress="listenEventAndCode(event);">this is onkeypress!</div>

寫到上面之後以爲自己對基本的keycode基本瞭解了,但是實際測試卻讓人十分鬱悶!

下面這一段代碼IE8會相應,而FireFox無響應,十分不解。

腳本代碼:

function divTest(e){

if(!e)e=window.event;

alert(e.which+"/"+e.keyCode+"/"+e.charCode);

}

頁面很簡單:

<div οnkeydοwn="divTest(event);" style="height:500px">

keydown test

</div>

<input οnkeydοwn="divTest(event);" type="text" />

之後就是頁面加載後,首先點擊div,按下Enter觸發事件。IE8提示:undefined/13/undefined,FF居然毫無反應。

但是在文本框中FF則反應良好,彈出13/13/0IE8也是undefined/13/undefined

利用FireBug調試發現FireFox完全沒有執行腳本代碼,不管這個div是否擁有焦點。

但是我們做下改動之後你又會發現一些問題:

在div裏面加入一個input ,如下:

 <div οnkeydοwn="divTest(event);" style="height:500px">

keydown test

<br/>

<input οnkeydοwn="divTest(event);" type="text" /> 

</div>

<input οnkeydοwn="divTest(event);" type="text" />

 由於沒有取消事件冒泡,在div裏面的input按下Enter應該會觸發2次divTest事件。測試結果IE和FF都如預期一樣正常。

另外,關於keyCode和charCode可以參考:

http://www.cnblogs.com/beiyu/archive/2010/02/09/keys_detected.html 

不過仍然沒有解決div按下enter未響應的問題。 

 最終解決方案:

給div加一個tabindex值, 那麼div就可以聚焦(周邊包含虛線框),於是就可以響應onkeydown事件了。

對於如何讓元素獲得焦點,請參考:

http://www.cnblogs.com/rubylouvre/archive/2010/05/03/1726334.html

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章