单击时如何清除数据列表输入? [英] How to clear datalist input on click?

问题描述

我在 Lit-Element 网络组件中有这个数据列表:

I have this datalist inside a Lit-Element web component:

<input list="cars" name="car" placeholder = "Type car name">

<datalist id="cars">
  <option value="Jeep">
  <option value="Lamborghini">
  <option value="Ferrari">
  <option value="Fiat 500">
  <option value="Gran Torino">
</datalist>

如果我从列表中选择这些选项之一，然后再次单击输入字段，我将看不到选项列表，而只能看到所选的选项.如果我想查看所有选项，我必须用键盘手动删除输入字段上写的选项.

If I select one of these options from the list, and then I click again on input field, I can't see the list of option but only the selected one. If I want to see all the options I have to manually delete with the keyboard the option written on input field.

是否存在一种即使选择了其中一个选项也能显示所有选项的方法?

Does it exist a way to show all the options even if one of these options is selected?

或者更好的是，有没有办法在焦点或点击时清除输入字段?

Or better, does it exist a way to clear the input field on focus or on click?

没有 JQuery.

推荐答案

在 input 元素上创建 onfocus 和 onchange 侦听器以清除焦点选择一个选项后，然后清除焦点上的输入.

Create onfocus and onchange listeners on your input element to clear focus after selecting an option, then clear input on focus.

<input list="cars" name="car" onfocus="this.value=''" onchange="this.blur();" placeholder = "Type car name">

<datalist id="cars">
  <option value="Jeep">
  <option value="Lamborghini">
  <option value="Ferrari">
  <option value="Fiat 500">
  <option value="Gran Torino">
</datalist>

这篇关于单击时如何清除数据列表输入?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！