如何清除点击时输入的数据列表？

问题描述

我在Lit-Element Web组件中有此数据列表：

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

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

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

或更妙的是，是否存在一种清除焦点或单击时输入字段的方法？

没有JQuery。

解决方法

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

input

,

是的，您可以通过单击来清除一个字段，但我建议您仅在单击时选择它，而不要直接删除它，因为可能会导致未命中的点击。

    YOUR_ELEMENT.addEventListener('click',mouse_event =>{
        mouse_event.target.select() 
    });

    YOUR_ELEMENT.addEventListener('click',mouse_event =>{
        mouse_event.target.value = '' 
    });

检查代码段

document.getElementById('test').addEventListener('click',(e) => {
        e.target.value = ''
})
document.getElementById('test2').addEventListener('click',(e) => {
        e.target.select()
})

<input type='text' id='test' placeholder='delete'/>
<input type='text' id='test2' placeholder='select'/>