Html "Select"标记不应在单击按钮"Enter"打开其"OPTIONS"

<select>
    <option></option>
    <option></option>
    <option></option>
</select>

我有一个选择元素，所以通常当控件"聚焦"在选择元素中，然后我们点击 Enter 按钮，所以显示选项。所以我的问题是我不想在Enter Press上打开它，我只想通过鼠标单击打开Select元素。

请注意，键盘辅助功能是 Web 辅助功能的核心租户之一。通过禁用用户打开选择的功能，您将使可能无法使用常规鼠标/触控板的残障人士无法使用您的 UI。

浏览器默认做正确的事情，请不要反对他们！

使用Event.preventDefault()来防止浏览器执行默认操作，这应该防止在按下空格或 Enter 时打开select元素。

香草 JS

document.querySelector("select").addEventListener("keypress", function(event) {
    event.preventDefault();
});

jQuery

$('select').keypress(function (e) {
    e.preventDefault();
})

您可以侦听 keydown 事件，并在按下 Enter 键时阻止默认操作。您可以通过根据浏览器兼容性检查key、keyCode或which来检查它是否是 Enter 键。

例如

document
  .getElementById("select")
  .addEventListener("keydown", function(e) {
    if (e.key === "Enter" || (e.keyCode || e.which) === 13)
      e.preventDefault();
  });

<select id="select">
    <option>aaa</option>
    <option>bbb</option>
    <option>ccc</option>
</select>

如果我理解你的问题你的想法......，这可能是答案：

<html>
<head>
   <title>Single Listbox Select Element</title>
</head>
<body>
<select size="2" style="height:1.5em;width:3em">
   <option>1</option>
   <option>2</option>
   <option>3</option>
   <option>4</option>
   <option>5</option>
   <option>6</option>
</select>
</body>
</html>

相关内容

最新更新

热门标签：