Twitter Bootstrap - 下拉菜单 - 箭头键不适用于Firefox中的输入标签 [英] Twitter Bootstrap - Drop down menu - Arrows Keys are not working for input tags in firefox

问题描述

要求

我想要在带有用户名和密码字段的下拉菜单中放入登录表单，我可以做到这一点。除了下面的问题外，一切运作良好， b
$ b

无法使用 firefox 中的箭头键（向上/向下），当输入位于缩放代码之外时，此功能很适用。这可以很好地与其他浏览器，如谷歌浏览器。

• Firefox 版本是 26


• Bootstrap版本：3.03


• jquery 1.10

问题：

如何解决这个问题，是否有问题jquery或twiter的js，因为它运作良好当我移动输入在下拉菜单之外

小提琴

这里是复制相同的小提琴： :: http://jsfiddle.net/santoshjoshi/WKU6M/3/

代码：

 < div id =navbar-exampleclass =navbar navbar-static> 
< div class =containerstyle =width：auto;> 
< div class =nav-collapse bs-js-navbar-collapse> 
< ul class =nav navbar-nav pull-left> 
 
< a href =＃id =drop4role =buttonclass =dropdown-toggledata-toggle =dropdown>注册< b class =caret>& amp ; NBSP;< / b>< / A> 
 
< li role =presentation> 
< div class =login_dropdown platform-font-1> 
< form class =form-horizo​​ntalaction =loginmethod =POST> 
< div class =form-group> 
< div class =col-lg-10> 
< input type =textclass =form-controlid =emailname =emailplaceholder =Email>&＃160;< / input> 
< / div> 
< / div> 
< / form> 
< / div> 
< / li> 
< / ul> 
< / li> 
< / ul> 
< / div> 
< / div> 
< / div> 
 <！ - 箭头键适用于下面的输入，但不适用于内部下拉 - > 
< input type =textclass =form-controlid =email1name =emailplaceholder =Email>&＃160;< / input> 
  

解决方案

修复，停止传播 onkeydown 事件：

e.stopPropagation（）;
}）;

Requirement

I want to put a login form inside the drowdown menu with username and password field, I am able to do that. all works well except the below issue,

Issue

While typing i am not able to use the arrows keys(up/down) in firefox , this works well when the input is outside the drowdown code. This works fine with other browsers like google crome.

• Firefox version is 26
• Bootstrap version : 3.03
• jquery 1.10

Question:

how to resolve this problem, is there an problem with jquery or twiter's js, as it works well when i move the input outside the dropdown

Fiddle

here is the fiddle that replicates the same::: http://jsfiddle.net/santoshjoshi/WKU6M/3/

Code:

    <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>

解决方案

Looks like kind of bug to me but as a simple fix, stop propagation of onkeydown event:

DEMO

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

这篇关于Twitter Bootstrap - 下拉菜单 - 箭头键不适用于Firefox中的输入标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！