Javascript 使select元素真正不可聚焦

我一直试图使select元素不可聚焦。多个来源建议将

选项卡index

设置为

-1

。这就是我尝试过的，但失败了

考虑以下示例：

函数addEv（id、事件、消息）
{
document.getElementById（id）.addEventListener（事件，函数（）{
document.getElementById（'console'）.innerHTML=message；
});
}
addEv（“选择”、“聚焦”、“选择聚焦”）；
addEv（“选择”、“模糊”、“选择模糊”）；
addEv（'span'，'focus'，'span focus'）；
addEv（'span'，'blur'，'span blur'）；
addEv（'select-wrapper'，'focus'，'div focus'）；
addEv（'select-wrapper'，'blur'，'div blur'）
#选择包装器{
显示：内联块；
填充：1px；
边框：1px实心透明；
}
#选择包装器：焦点{
边框：1px实心；
边界半径：5px；
大纲：无；
}

属于
啤酒
葡萄酒
伏特加


编辑：此方法在Firefox52或某些早期版本中停止工作

我自己找到了一个肮脏的解决办法。如果忽略select元素仍然触发focus和blur事件的事实，我可以通过在select元素聚焦时执行
select.blur（）
和
div.focus（）
使其看起来像div元素聚焦。请参阅下面的代码

注意：如果您打算使用我的解决方案，请不要忘记手动实现辅助功能，因为它们将不再像@nnnn所指出的那样工作


函数addEv（id、事件、消息）
{
document.getElementById（id）.addEventListener（事件，函数（）{
document.getElementById（'console'）。innerHTML+=message+“
”；
});
}
addEv（“选择”、“聚焦”、“选择聚焦”）；
addEv（“选择”、“模糊”、“选择模糊”）；
addEv（'span'，'focus'，'span focus'）；
addEv（'span'，'blur'，'span blur'）；
addEv（'select-wrapper'，'focus'，'div focus'）；
addEv（'select-wrapper'，'blur'，'div blur'）；
document.getElementById（'select'）。addEventListener（'focus'，function（）{
document.getElementById（'select'）.blur（）；
document.getElementById（'select-wrapper'）.focus（）；
});
#选择包装器{
显示：内联块；
填充：1px；
边框：1px实心透明；
}
#选择包装器：焦点{
边框：1px实心；
边界半径：5px；
大纲：无；
}

属于
啤酒
葡萄酒
伏特加


编辑：此方法在Firefox52或某些早期版本中停止工作

我自己找到了一个肮脏的解决办法。如果忽略select元素仍然触发focus和blur事件的事实，我可以通过在select元素聚焦时执行
select.blur（）
和
div.focus（）
使其看起来像div元素聚焦。请参阅下面的代码

注意：如果您打算使用我的解决方案，请不要忘记手动实现辅助功能，因为它们将不再像@nnnn所指出的那样工作


函数addEv（id、事件、消息）
{
document.getElementById（id）.addEventListener（事件，函数（）{
document.getElementById（'console'）。innerHTML+=message+“
”；
});
}
addEv（“选择”、“聚焦”、“选择聚焦”）；
addEv（“选择”、“模糊”、“选择模糊”）；
addEv（'span'，'focus'，'span focus'）；
addEv（'span'，'blur'，'span blur'）；
addEv（'select-wrapper'，'focus'，'div focus'）；
addEv（'select-wrapper'，'blur'，'div blur'）；
document.getElementById（'select'）。addEventListener（'focus'，function（）{
document.getElementById（'select'）.blur（）；
document.getElementById（'select-wrapper'）.focus（）；
});
#选择包装器{
显示：内联块；
填充：1px；
边框：1px实心透明；
}
#选择包装器：焦点{
边框：1px实心；
边界半径：5px；
大纲：无；
}

属于
啤酒
葡萄酒
伏特加

除了tabindex=-1之外，还可以将其添加到CSS属性中

  pointer-events: none;

这对我很有用
除了tabindex=-1之外，您还可以将其添加到CSS属性中

  pointer-events: none;

这对我来说很有效
tabindex
仅在通过元素进行tab时有效，而不是在
click
css上有一个
指针事件
属性，该属性可能会help@JaromandaX使用
指针事件：无使select元素不可用，因为我无法再选择任何内容。当然，否则这将是一个完美的解决方案。我一定不明白你想要什么。如果你不能集中精力选择，它就不能“打开”
tabindex
仅在通过元素进行tab时有效，而不是在
click
css上有一个
指针事件
属性，该属性可能会help@JaromandaX使用
指针事件：无使select元素不可用，因为我无法再选择任何内容。否则这当然是一个完美的解决方案。我一定不明白你想要什么。如果你不能集中选择，它就不能被“打开”。注意，这个解决方案意味着你的页面将不符合可访问性准则，因为不可能通过键盘使用选择元素。（请记住，有些用户不能使用鼠标或其他定点设备…）我知道这一点。在我的实际应用程序中，我已经实现了复选框的空格键（我需要以类似的方式重新设计）和手动选择的上下键，然后才偶然发现这个问题（足够了吗？）。当我写这个答案时，我只是想展示实际问题的解决方案。但是，这一点非常重要，我将为阅读我的答案的其他人添加一个通知。请注意，此解决方案意味着您的页面将不符合可访问性准则，因为无法通过键盘使用select元素。（请记住，有些用户不能使用鼠标或其他定点设备…）我知道这一点。在我的实际应用程序中，我已经实现了复选框的空格键（我需要以类似的方式重新设计）和手动选择的上下键，然后才偶然发现t