显示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

我认为默认选择下拉菜单是不可能的，因为打开的下拉菜单创建在浏览器窗口的顶部，而不是文档的一部分。

您可以使用/构建某种替换，以使用文档内部的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>

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

问题描述

1 个解决方案

解决方案1
0 已采纳 2019-05-31 11:00:48

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

问题描述

1 个解决方案

解决方案1 0 已采纳 2019-05-31 11:00:48

解决方案1
0 已采纳 2019-05-31 11:00:48