Question

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

我有一个Select元素，所以通常在控件＆＃34;焦点＆＃34;在Select元素中然后我们点击Enter按钮以显示OPTION。所以我的问题是我不想在Enter Press上打开它，我只想通过鼠标点击打开Select元素。

Answer 1

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

<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>

Answer 2

如果按下回车键，您可以收听keydown事件和prevent the default操作。您可以根据浏览器兼容性检查key，keyCode或which来检查输入密钥是否为输入密钥。

e.g。

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>

Answer 3

使用Event.preventDefault()来阻止浏览器采取默认操作，这样可以防止在空格或输入时按下select元素。

vanilla js

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

<强>的jQuery

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

Answer 4

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

浏览器默认会做正确的事，请不要与他们对抗！

Html＆＃34;选择＆＃34;标签不应该打开它的＆＃34; OPTIONS＆＃34;在＆＃34;输入＆＃34;按钮单击

4 个答案: