引导输入下拉键盘箭头答案

【问题标题】：bootstrap input dropdown keyboard arrow引导输入下拉键盘箭头
【发布时间】：2015-08-19 07:32:24
【问题描述】：

我在无障碍项目中使用围绕 Bootstrap 构建的组合框（输入 + 下拉菜单）。

我遇到了在 v3.3.0 和 v3.3.1 之间对 bootstrap 的 dropdown.js 部分进行的更改，这破坏了我的代码。

当焦点是input 时，向上或向下键盘箭头用于触发下拉菜单，这是我想要的，因为目标是使仅键盘导航成为可能，但它不再起作用了。

当我比较时：

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.js

和

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.js

更改来自（3.3.0，第 798 行）

Dropdown.prototype.keydown = function (e) {
if (!/(38|40|27|32)/.test(e.which)) return

至（3.3.1，第 799 行）

Dropdown.prototype.keydown = function (e) {
if (!/(38|40|27|32)/.test(e.which) || /input|textarea/i.test(e.target.tagName)) return

所以，我知道我可能可以使用 jQuery 来解决这个问题，但是这种变化有真正的原因吗？如果没有，这可以被视为一个错误报告。

下面是我的小部件的 Bootply 演示。适用于 Bootstrap 3.3.0 及以下任何版本，但如果您将引导版本弹出窗口更改为 3.3.0 以上版本，它不会响应箭头键。

http://www.bootply.com/2gHt0MWRWd

【问题讨论】：

我自己也想知道...

标签： javascript jquery html twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

这里有一个解决办法：

$('[data-toggle="dropdown"]').keydown(function(e){
  if(e.which == 40){
    $(this).dropdown('toggle');
  }
});

这只是检查向下箭头（键码 40）

See it in action here

【讨论】：

【解决方案2】：

目前正在对此进行辩论，as logged in issue 15757。

在 pull #15088 (Dropdown: Ignore keydown events coming from inputs and textareas) 中进行了调整。他们没有说明“为什么”有必要在发布中走这条路，但经过一番挖掘，我能够找到涉及一些开发人员和 Bootstrap 团队的问题/辩论。

在那次辩论中，有人提到它被添加：

"允许在下拉菜单中输入空格"

他们仍在集思广益解决方案，所以我可能建议在辩论中加入你的两分钱。希望这会有所帮助。

【讨论】：