如何清除点击时的数据列表输入?
How to clear datalist input on click?
我在 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>
如果我 select 列表中的这些选项之一,然后再次单击输入字段,我看不到选项列表,只能看到 selected 的选项。如果我想查看所有选项,我必须用键盘手动删除输入字段上写的选项。
是否存在显示所有选项的方法,即使这些选项之一是 selected?
或者更好的是,是否存在一种在获得焦点或单击时清除输入字段的方法?
没有JQuery.
是的,您可以通过单击来清除字段,但我建议仅在单击时 select 它而不是直接删除它,因为可能会发生误点击。
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'/>
在您的 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>
我在 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>
如果我 select 列表中的这些选项之一,然后再次单击输入字段,我看不到选项列表,只能看到 selected 的选项。如果我想查看所有选项,我必须用键盘手动删除输入字段上写的选项。
是否存在显示所有选项的方法,即使这些选项之一是 selected?
或者更好的是,是否存在一种在获得焦点或单击时清除输入字段的方法?
没有JQuery.
是的,您可以通过单击来清除字段,但我建议仅在单击时 select 它而不是直接删除它,因为可能会发生误点击。
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'/>
在您的 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>