css 在输入类型文本处按enter键显示datalist

wwtsj6pe 于 2023-03-24 发布在其他

关注(0)|答案(1)|浏览(113)

我有一个输入文本字段，其中有项目列表作为数据列表。我想显示项目列表，如果有人导航到该字段使用选项卡，然后按回车键。
我尝试触发click（），但没有工作。

<input type='text' list='fruits'>
<datalist id='fruits'>
 <option>Apple</option>
 <option>Orange</option>
 <option>Grape</option>
</datalist>

脚本;

$('input[type=text]').keyup(function(e){
 if(e.keyCode == 13){
  $(this).click();
 }
});

还有其他方法可以做到这一点吗？

1条答案

您可以使用一个名为focus的css选择器。

<style>
     #fruits {
          opacity: 0;
     }

     #fruits:focus {
          opacity: 1;
     }
</style>

注意，不能使用display: none;作为默认值，因为这会使元素不可聚焦。