将焦点设置为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>

答

keypress事件是需要取消的事件，但Firefox会在此场景中忽略preventDefault（）。因此，解决方案是模糊当前下拉列表，让按键事件在文档上触发，并通过超时将焦点设置为新的下拉列表。

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

感谢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/

会帮助你理解为什么！一些与大小写敏感的人物有关我想。

顺便说一句向下滚动，你有在底部的演示，应该给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？）

相关推荐