JavaScript：使 <select onchange> 或 <option onclick> 可通过键盘访问答案

【问题标题】：JavaScript: Make <select onchange> or <option onclick> keyboard-accessibleJavaScript：使 <select onchange> 或 <option onclick> 可通过键盘访问
【发布时间】：2015-08-27 17:14:23
【问题描述】：

以前有人问过类似的问题，但我正在寻找比所有其他人都“相反”的解决方案;-)

我需要一个 JavaScript 事件，当用户决定在 select 字段中使用 option 时触发。

决定是什么意思：

鼠标：点击展开select，然后点击选择任意option。
键盘：任一个：
- 按 UP/DOWN 键“滚动”选项（不展开 select），然后按 ENTER/TAB 进行选择。或者：
- 按 ALT+DOWN 展开select，然后使用 UP/DOWN 键滚动选项，最后按 ENTER/TAB 进行选择。

到目前为止我发现的不完美的解决方案：

onclick 在每个 option 上：Firefox 和 Internet Explorer：适用于鼠标，但不适用于键盘。 Chrome：根本不工作。
onchange select 上的 onchange：Firefox：按预期工作。 Chrome 和 Internet Explorer：仅使用 UP/DOWN 键时过早触发（不扩展 select）：在用户的心目中，他们只是滚动可用选项，而不是实际上正在选择任何东西。
尽管很流行，但这种方法违反了 WCAG：http://www.w3.org/TR/2012/NOTE-UNDERSTANDING-WCAG20-20120103/consistent-behavior-unpredictable-change.html
onblur 在select 上：Firefox & Chrome & Internet Explorer：触发太晚了，只有当真正离开select。
onkeydown 在select 上，加上评估keyCode：对我来说看起来很麻烦，因为除了按 ENTER 键（可能在移动设备上）之外，可能有（或结果）其他方法来确认某事。

我发现的唯一解决方案，具有完美的可访问性，是丑陋的：

有一个明确的submit 按钮并将事件绑定到此。

所以（最后）我的问题是：您知道没有submit 按钮的其他方法吗？

【问题讨论】：

更改选择元素的默认行为可能会让用户感到困惑。不知道为什么你认为有一个明确的按钮是丑陋的。
您说 select 上的更改事件违反了 WCAG：w3.org/TR/2012/NOTE-UNDERSTANDING-WCAG20-20120103/… 我不同意：期望用户代理（浏览器）的用户知道如何使用该功能是完全合理的。因此，如果他们只是浏览选项，则可以合理预期他们应该首先使用空格键打开选择元素。如果不是这种情况，则应更改用户代理，以便按照用户期望的方式解释箭头键的使用。

标签： javascript html accessibility wcag2.0

【解决方案1】：

你可以使用the onInput event:

当 <input>、<select> 或 <textarea> 元素的值发生更改时，DOM input 事件会同步触发。

现在，Firefox doesn’t support the event on <select> elements，但由于 onChange 在 Firefox 中的工作方式与您的期望一样，您可以选择。（无论如何，你想要一个onChange 的backwards compatibility 监听器。）

【讨论】：