將焦點設置爲KeyDown和KeyUp事件之間的SELECT問題（Firefox bug？）

當我使用元素的KeyDown事件處理箭頭鍵（上/下/左/右）以將焦點設置到SELECT上時，獲得「聚焦」的SELECT似乎是接收一個「KeyUp」事件，它使得它選擇下一個/上一個OPTION（取決於你按下的箭頭）。它只發生在Firefox（測試3 & 4），其中IE8 & Chrome按預期工作（它們不會改變「聚焦」SELECT的值）。將焦點設置爲KeyDown和KeyUp事件之間的SELECT問題（Firefox bug？）

下面的代碼重現的問題（只要按下任何箭頭鍵，它會關注其他）：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
    <title>KeyUp Issue</title> 
    <script type="text/javascript" src="jquery-1.4.2.min.js"></script> 
</head> 
<body> 
    <script type="text/javascript"> 
     $("select") 
      .live("keydown", function(event) 
      { 
       switch (event.keyCode) 
       { 
        case 37: // left 
        case 38: // up 
        case 39: // right 
        case 40: // down 
         $(this).siblings().focus(); 
         event.preventDefault(); 
         break; 
       } 
      }) 
      .live("keyup", function(event) 
      { 
       // This event handler makes absolutely no difference; it's still 
       // "broken" in Firefox and works fine in IE/Chrome without it. 
       switch (event.keyCode) 
       { 
        case 37: // left 
        case 38: // up 
        case 39: // right 
        case 40: // down 
         event.preventDefault(); 
         break; 
       } 
      }) 
      .live("keypress", function(event) 
      { 
       // This event handler makes absolutely no difference; it's still 
       // "broken" in Firefox and works fine in IE/Chrome without it. 
       switch (event.keyCode) 
       { 
        case 37: // left 
        case 38: // up 
        case 39: // right 
        case 40: // down 
         event.preventDefault(); 
         break; 
       } 
      }); 
    </script> 
    <select id="select1"> 
     <option>One</option> 
     <option>Two</option> 
     <option>Three</option> 
     <option>Four</option> 
    </select> 
    <select id="select2"> 
     <option>One</option> 
     <option>Two</option> 
     <option>Three</option> 
     <option>Four</option> 
    </select> 
</body> 
</html>

來源

2011-05-05 Jocie

keypress事件是需要取消的事件，但Firefox會在此場景中忽略preventDefault（）。因此，解決方案是模糊當前下拉列表，讓按鍵事件在文檔上觸發，並通過超時將焦點設置爲新的下拉列表。

演示在http://jsfiddle.net/roberkules/3vA53/

來源

2011-05-24 17:16:31 roberkules

感謝roberkules，這工作出色！謝謝你給我展示jsfiddle.net太棒了，真棒的網站！ – Jocie 2011-05-25 08:48:50

不客氣，是的，jsfiddle似乎很棒，幾天前也偶然發現了它。想想，爲什麼我沒有想法:) – roberkules 2011-05-27 14:29:29

你所面臨的問題是按鍵吧？

http://www.mkyong.com/jquery/jquery-keyboard-events-example/

會幫助你理解爲什麼！一些與大小寫敏感的人物有關我想。

來源

2011-05-05 15:02:46 Val

順便說一句向下滾動，你有在底部的演示，應該給U上的一個想法，爲什麼不你的箭頭按鈕的工作 – Val 2011-05-05 15:04:33

沒有，按鍵響應不是問題（INFACT無論是有或沒有絕對沒有任何區別），第二個SELECT確實得到了專注，但它是值更改，它不應該像我已經調用preventDefault（）（事實上沒有這個調用，在IE和Chrome中原來的SELECT值被改變了，我期望會發生什麼）。 – Jocie 2011-05-06 07:52:38

你在'preventDefault（）'之後完成了'return;'？ – Val 2011-05-08 14:07:17

將焦點設置爲KeyDown和KeyUp事件之間的SELECT問題（Firefox bug？）

回答

相關問題