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

Question

我想在用户按下键盘时使用 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>

Answer 1

我认为默认 select-dropdown 无法做到这一点，因为打开的 dropdown-menu 是在浏览器 window 之上创建的，实际上并不是文档的一部分。

您可以 use/build 某种替代品，在文档中呈现带有 html-elements 的自定义下拉菜单，然后捕获您想要的所有事件。

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

这是一个使用 select2 的示例，并且仅在 keydown-event 发生且下拉列表打开时发出警报：

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

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

How to use javascript or jquery to get keyboard input when html drop down menu is show?

html

javascript

keyboard

select