Question

我一直试图让一个选择元素无法聚焦。多个来源建议将tabIndex设置为-1。这就是我的尝试，但失败了。

考虑以下示例：

＆＃13;

function addEv(id, event, message)
{
  document.getElementById(id).addEventListener(event, function(){
    document.getElementById('console').innerHTML = message;
  });
}
addEv('select', 'focus', 'select focus');
addEv('select', 'blur', 'select blur');

addEv('span', 'focus', 'span focus');
addEv('span', 'blur', 'span blur');

addEv('select-wrapper', 'focus', 'div focus');
addEv('select-wrapper', 'blur', 'div blur');

＆＃13;

#select-wrapper {
  display: inline-block;
  padding: 1px;
  border: 1px solid transparent;
}
#select-wrapper:focus {
  border: 1px solid;
  border-radius: 5px;
  outline: none;
}

＆＃13;

<input type="text" value="3 glasses">
<div id="select-wrapper" tabindex="0">
  <span id="span">of</span>
  <select id="select" tabindex="-1">
    <option value="beer">Beer</option>
    <option value="wine" selected>Wine</option>
    <option value="vodka">Vodka</option>
  </select>
</div>
<input type="button" value="drink">
<div id="console"></div><br>

＆＃13;

如果您浏览元素，一切都按预期工作。两个输入元素和div元素得到集中。同样可以点击＆＃34;＆＃34;的范围。但是，如果单击select元素，它将被聚焦而不是div。这意味着错误的焦点事件被触发，并且选择元素的视觉效果就像它聚焦时一样变化。这在Firefox和Chrome中是一致的，所以我认为这是故意的。

问题是：如何使select元素不可聚焦并使其周围的div可以聚焦？当然，我仍然希望能够打开下拉列表并选择一个选项。

Answer 1

编辑：此方法在Firefox 52或某些早期版本
中停止运行

我自己找到了一个肮脏的解决方案。如果我忽略了select元素仍会触发焦点和模糊事件的事实，那么当select元素被聚焦时，我可以通过执行select.blur()和div.focus()来使其看起来像div元素。请参阅下面的代码。

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

＆＃13;

function addEv(id, event, message)
{
	document.getElementById(id).addEventListener(event, function(){
    document.getElementById('console').innerHTML += message+"<br>";
  });
}
addEv('select', 'focus', 'select focus');
addEv('select', 'blur', 'select blur');

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();
});

＆＃13;

#select-wrapper {
  display: inline-block;
  padding: 1px;
  border: 1px solid transparent;
}
#select-wrapper:focus {
  border: 1px solid;
  border-radius: 5px;
  outline: none;
}

＆＃13;

<input type="text" value="3 glasses">
<div id="select-wrapper" tabindex="0">
  <span id="span">of</span>
  <select id="select" tabindex="-1">
    <option value="beer">Beer</option>
    <option value="wine" selected>Wine</option>
    <option value="vodka">Vodka</option>
  </select>
</div>
<input type="button" value="drink">
<div id="console"></div><br>

＆＃13;

Answer 2

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

  pointer-events: none;

这对我有用

使选择元素真正无法聚焦

2 个答案: