在表单中按Enter键时,Bootstrap Dropdown总是会聚焦

Question

我有一个内部有不同字段的表单.我使用下拉按钮而不是普通的选择标签,以获得更好的用户体验.但问题是,当我在其他文本输入字段上按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>

这是JS小提琴:http://jsfiddle.net/ergLb/

你们有什么想法吗？

Answer 1

我添加了type ="button",它有效.

https://github.com/twbs/bootstrap/issues/3886

Answer 2

mdo 在 bootstrap 问题单中给出了答案：https : //github.com/twbs/bootstrap/issues/3886 您忘记type=button了触发下拉切换的按钮。代码应该是这样的：

<button type="button" data-toggle="dropdown" class="btn btn-small btn-white dropdown-toggle">
    <span class="caret"></span>
</button>

Answer 3

似乎默认情况下，当enter在文本框中按下按键时，它会触发下拉菜单上的单击事件。您可以使用e.preventDefault()或return false来防止这种默认行为：

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

更新了小提琴