Jquery 在窗体中按enter键时,引导下拉菜单始终保持焦点

Jquery 在窗体中按enter键时,引导下拉菜单始终保持焦点,jquery,html,twitter-bootstrap,Jquery,Html,Twitter Bootstrap,我有一个表单,里面有不同的字段。为了更好的用户体验,我使用了一个下拉按钮,而不是普通的选择标签。但是,问题是,当我在其他文本输入字段上按enter键时,该下拉列表总是会聚焦。这很烦人,也很麻烦 <form> <div class="row"> <div class="col-md-6"> <button type="button" class="btn btn-white dropdown-toggle"

我有一个表单,里面有不同的字段。为了更好的用户体验,我使用了一个下拉按钮,而不是普通的选择标签。但是,问题是,当我在其他文本输入字段上按enter键时,该下拉列表总是会聚焦。这很烦人,也很麻烦

<form>
    <div class="row">
        <div class="col-md-6">
            <button type="button" class="btn btn-white dropdown-toggle" data-toggle="dropdown">
            <span class="dropdown-label">
                Test
            </span>
          </button>
          <button data-toggle="dropdown" class="btn btn-small btn-white dropdown-toggle">
            <span class="caret"></span>
          </button>
          <ul class="dropdown-menu dropdown-select" role="menu">
              <li><a>
                Testing 1
              </a></li>
              <li><a>
                Testing 2
              </a></li>
          </ul>
        </div>
        <div class="col-md-6">
            <input type="text" class="form-control"/>
        </div>
    </div>
</form>

试验

  • 你们知道这是为什么吗?

    在默认情况下,当文本框内按了
    enter
    键时,它会在您的下拉列表中触发单击事件。您可以使用
    e.preventDefault()
    return false
    来防止这种默认行为:

    $(".form-control").keydown(function(e){
        if(e.keyCode == 13) {
            return false;
        }
    });
    

    我添加了type=“button”,它可以正常工作


    mdo在引导发布通知单中给出了答案: 您忘记了按钮上的
    type=button
    ,这会触发下拉切换。代码应如下所示:

    <button type="button" data-toggle="dropdown" class="btn btn-small btn-white dropdown-toggle">
        <span class="caret"></span>
    </button>
    
    
    
    可能有人输入了一段代码,按下enter键时会触发表单提交;但是它是使用submit按钮的
    单击事件而不是表单的
    提交事件来实现的。这就解释了为什么OP的按钮会被点击@OP:为了好玩,如果你用
    替代,你能检查一下同样的问题是否存在吗?如果没有,我认为我的解释是正确的。这也意味着你的答案不能100%保证解决它,因为错误的实现可能会在你的答案之前触发。我想…我知道这个答案在其他情况下可能是不正确的,但无论如何,它对我来说是有效的:)