單擊時如何清除數據列表輸入？

Question

我在 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。

Answer 1

在input元素上創建onfocus和onchange偵聽器以在選擇選項后清除焦點，然后清除焦點上的輸入。

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

Answer 2

是的，您可以通過單擊來清除字段，但我建議僅在單擊時選擇它，而不是直接將其刪除，因為可能會發生誤點擊。

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