Question

我有一个页面，当用户按住某个键时，在我的情况下[Ctrl]，他们能够以特定方式与页面元素进行交互。一旦他们释放密钥，并且keyup事件触发，我重置一些标志。我发现，当我按住键时单击选择下拉列表时，键盘事件永远不会被捕获。我创建了一个快速笔来演示这个问题。我不知道它是否是一个范围问题。目前我使用jQuery来监听$(document).on('keyup',(e)=>{})，但是select可能有不同的范围？我已经尝试了一些，但找不到有效的。

https://codepen.io/srm985/pen/LmPvdO

＆＃13;

$(document).on("keydown", e => {
  if (e.keyCode == "17") {
    $("span").text("true");
  }
});

$(document).on("keyup", e => {
  if (e.keyCode == "17") {
    $("span").text("false");
  }
});

＆＃13;

select {
  width: 250px;
  height: 35px;
}

span {
  color: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Press and hold [Ctrl]. While holding [Ctrl], click on select. The keyup event is never captured.</p>
<p>Key Down: <span>false</span></p>
<select>
  <option>test1</option>
  <option>test2</option>
</select>

＆＃13;

Answer 1

这是chrome中的已知错误：https://bugs.chromium.org/p/chromium/issues/detail?id=336710

目前，唯一可行的解决方案是为您选择一个size属性＆gt; 1（这不是下拉列表，而是列表），或使用https://select2.org/之类的东西来模拟选择。

如果单击选择（下拉列表）错过了键盘事件

1 个答案: