網站頁面斷行符號和滑鼠焦點

來源:互聯網
上載者:User

最近在開發中遇到一個問題,其實本是很簡單的問題,可自己想半天也想不明白。
情況大致如下:
頁面有個搜尋方塊,再有個登入的表單,按斷行符號時執行搜尋呢還是執行表單提交,本來是個很容易的問題,可因當初寫斷行符號搜尋的時候是直接寫在頁面上的,即只要斷行符號就執行搜尋。
大致代碼如下:

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" />的伺服器事件

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.