2013-12-22 111 views
2

要求Twitter的引导 - 下拉菜单 - 箭头键不能在Firefox

工作输入标签我希望把用户名和密码领域的drowdown菜单内的登录表单,我能做到这一点。一切运作良好,除了下面的问题,

问题

打字时我不能够在火狐使用箭头键(上/下),当输入超出这个效果很好下沉代码。这适用于其他浏览器,如谷歌浏览器。

  • 火狐版本
  • 引导版本:3.03
  • jQuery的1.10

问:

如何解决这个问题,有一个问题与jquery或twiter的js,因为它运作良好时,我移动输入下拉

小提琴

这里外面是复制相同::: http://jsfiddle.net/santoshjoshi/WKU6M/3/

代码小提琴:

<div id="navbar-example" class="navbar navbar-static"> 
    <div class="container" style="width: auto;"> 
     <div class="nav-collapse bs-js-navbar-collapse"> 
      <ul class="nav navbar-nav pull-left"> 
       <li id="sign-up-dropdown" class="dropdown closed noshow"> 
        <a href="#" id="drop4" role="button" class="dropdown-toggle" data-toggle="dropdown">Sign Up<b class="caret">&nbsp;</b></a> 
        <ul class="dropdown-menu" role="menu" aria-labelledby="drop3"> 
         <li role="presentation"> 
           <div class="login_dropdown platform-font-1"> 
            <form class="form-horizontal" action="login" method="POST"> 
             <div class="form-group"> 
              <div class="col-lg-10"> 
               <input type="text" class="form-control " id="email" name="email" placeholder="Email">&#160;</input> 
              </div> 
             </div> 
            </form> 
           </div> 
         </li> 
        </ul> 
       </li> 
      </ul> 
     </div> 
    </div> 
</div> 
<!-- Arrow keys works with the below input but not the one inside drop down --> 
<input type="text" class="form-control " id="email1" name="email" placeholder="Email">&#160;</input> 
+0

它看起来像在Firefox中的错误。我通常使用ALT +左箭头或ALT +右箭头在开头或结尾移动,这些快捷键可以使用。 – LeBen

+0

是否要使用上/下箭头来选择自动完成列表条目? – ToniTornado

+0

好的如果你想使用向上/向下箭头来选择一个自动完成列表条目,那么我可以确认Chrome的这种不同的行为。我可以证实A.沃尔夫的解决方案为我解决了这个问题。 – ToniTornado

回答

4

看起来像那种错误给我,但作为一个简单的修复,停止传播onkeydown事件:

DEMO

$('#email').on('keydown',function(e){ 
    e.stopPropagation(); 
}); 
+0

这是有效的,但唯一的问题是为什么自动建议/完整条目可以在dowpdown之外使用输入,而不是在下拉菜单中使用输入。这真的是一个与Firefox或Twitter的Bootstrap的错误 –