Question

当您在聚焦元素后按“输入”打开下拉列表时，您可以使用键盘输入字母以转到所需的选择。例如，在此下拉列表中：

<select>
  <option></option>
  <option>America</option>
  <option>Belgium</option>
  <option>Brazil</option>
  <option>China</option>
  <option>Denmark</option>
  <option>Egypt</option>
<select>

当我用“输入”键打开下拉列表时，我可以键入“BE”等字母前往比利时或“E”前往埃及。有没有办法用键盘返回空选项？我几乎尝试了所有可能的组合键。

我很乐意在不使用javascript的情况下实现这一目标。

小提琴链接试用：https://jsfiddle.net/04kaje9e/

Answer 1

通过测试键盘上的每一个键，我为选择下拉列表找出了这些关键组合：

我还发现了其他可用的密钥：

"Page up" : go to top of viewable list
"Page down" : go to bottom of viewable list
"Home": go to top of total list
"End" : go to bottom of total list

Answer 2

只清空focusout上的下拉列表值。从下拉列表中选择任何值后，按＆＃34; Tab＆＃34; jquery函数后面的键将执行。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="dropDown">
  <option></option>
  <option>America</option>
  <option>Belgium</option>
  <option>Brazil</option>
  <option>China</option>
  <option>Denmark</option>
  <option>Egypt</option>
<select>
<script>
    $(document).ready(function() {
         $("#dropDown").on("focusout", function(){
            $('#dropDown').val('');
         });
     });
</script>

如何在HTML5选择元素中使用键盘清空下拉选项？

2 个答案: