显示html下拉菜单时如何使用javascript或jquery获取键盘输入？答案

【问题标题】：How to use javascript or jquery to get keyboard input when html drop down menu is show?显示html下拉菜单时如何使用javascript或jquery获取键盘输入？
【发布时间】：2019-10-17 00:30:01
【问题描述】：

我想在用户按下键盘时使用 javascript 或 jquery 获取输入。当下拉菜单不显示时是可能的。显示下拉菜单时，不会触发 onkeypress。

<html>
<body>
<select id="test" onkeypress="sayHello()">
<option value="1">1234</option>
<option value="5">5678</option>
</select>
</body>

<script>
function sayHello(){
    alert("Hello");
}
</script>
</html>

【问题讨论】：

标签： javascript html select keyboard

【解决方案1】：

我认为默认的选择下拉菜单无法做到这一点，因为打开的下拉菜单是在浏览器窗口顶部创建的，实际上并不是文档的一部分。

您可以使用/构建某种替换，在文档中呈现带有 html 元素的自定义下拉菜单，然后捕获您想要的所有事件。

例如看看Select2。但是还有很多其他的库。

这是一个使用 select2 的示例，仅在发生 keydown 事件且下拉菜单打开时发出警报：

$(document).ready(function() {
  $('#example').select2({
    minimumResultsForSearch: 99
  });
  
  let isDropdownOpen = false;
  $('#example').on('select2:open', function(event) {
    isDropdownOpen = true;
  });
  $('#example').on('select2:close', function(event) {
    isDropdownOpen = false;
  });
  
  $(document).on('keydown', function(event) {
    if (isDropdownOpen) {
      event.preventDefault();
      alert('Hello!');
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/js/select2.min.js"></script>

<select id="example" name="example">
  <option value="1234">1234</option>
  <option value="5678">5678</option>
</select>

【讨论】：