最近在開發中遇到一個問題,其實本是很簡單的問題,可自己想半天也想不明白。
情況大致如下:
頁面有個搜尋方塊,再有個登入的表單,按斷行符號時執行搜尋呢還是執行表單提交,本來是個很容易的問題,可因當初寫斷行符號搜尋的時候是直接寫在頁面上的,即只要斷行符號就執行搜尋。
大致代碼如下:
1 document.onkeydown(){ //網頁內按下斷行符號觸發
2 if(event.keyCode==13)
3 {
4 search(); //搜尋事件
5 }
6 }
當時不知道為什麼鬼使神差的寫了上面這段代碼,愚蠢啊!!也就是不管什麼情況,按下斷行符號就執行搜尋。顯然,這是錯誤的。關於斷行符號搜尋的流程應該是這樣的:
也就是說,當焦點是在搜尋選項的文字框時,斷行符號才搜尋,焦點不在文字框是斷行符號無響應,這才是一個合理的設計。
那麼實際但嗎應該是這樣的:
文字框:
<input type="text" onkeydown="keydownsearch()" />
js:
1 function keydownsearch()
2 {
3 if(event.keyCode==13)
4 {
5 search(); //搜尋事件
6 }
7 }
實際使用中還是有問題,firefox瀏覽器不相容。看來是firefox和IE斷行符號事件不一樣。
代碼修改如下:
文字框:
<input type="text" onkeydown="keydownsearch(event)" />
js:
1 function keydownsearch(evt)
2 {
3 evt = (evt) ? evt : ((window.event) ? window.event : "")
4 keyCode = evt.keyCode ? evt.keyCode : (evt.which ? evt.which : evt.charCode);
5 if (keyCode == 13) {
6 search(); //搜尋事件
7 }
8 }
修改完成,經測試,IE6\7\8,firefox,chrome都能相容。
總結:
1、頁面斷行符號事件盡量不要寫在document.onkeydown中,這樣只要斷行符號就會首先觸發改JS事件,一般寫在文字框中。
<input type="text" onkeydown="keydownsearch(event)" />
2、頁面中如沒有為按鈕某按鈕為焦點,斷行符號後首先執行的是表單提交,也就是<input type="submit" />的伺服器事件