【问题标题】:Twitter Bootstrap - Drop down menu - Arrows Keys are not working for input tags in firefoxTwitter Bootstrap - 下拉菜单 - 箭头键不适用于 Firefox 中的输入标签
【发布时间】:2014-01-11 00:18:00
【问题描述】:

要求

我想在带有用户名和密码字段的下拉菜单中放置一个登录表单,我可以做到。除了下面的问题,一切都很好,

问题

在输入时,我无法在 firefox 中使用箭头键(上/下),但当输入位于下拉代码之外时,此方法效果很好。这适用于 google crome 等其他浏览器。

  • Firefox 版本是 26
  • 引导版本: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>

【问题讨论】:

  • 它看起来像 Firefox 中的一个错误。我通常使用 ALT + 左箭头或 ALT + 右箭头在开头或结尾移动,这些快捷方式有效。
  • 您要使用向上/向下箭头来选择自动完成列表条目吗?
  • 好的,如果您想使用向上/向下箭头来选择自动完成列表条目,那么我可以确认 Chrome 的这种不同行为。我可以确认 A. Wolff 的解决方案为我解决了这个问题。
  • @ToniTornado 我想像使用预先保存/预填充的自动建议/完成条目一样使用它。
  • @LeBen,我认为这是引导程序的错误,因为菜单外的其他输入类型可以完美运行

标签: javascript jquery html css twitter-bootstrap-3


【解决方案1】:

对我来说似乎是一种错误,但作为一个简单的修复,停止传播 onkeydown 事件:

DEMO

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

【讨论】:

  • 这行得通,但唯一的问题是为什么自动建议/完成条目适用于下拉菜单外的输入,而不是下拉菜单内的输入。这真的是 firefox 或 twitter 的 Bootstrap 的错误吗
猜你喜欢
  • 1970-01-01
  • 2012-07-28
  • 2014-04-24
  • 1970-01-01
  • 2012-02-21
  • 1970-01-01
  • 2012-08-12
  • 1970-01-01
  • 2012-04-17
相关资源
最近更新 更多