使用 javascript 模拟点击不适用于数据列表的输入

Question

单击输入字段时会出现类似列表的下拉列表。当尝试对 javascript click() 做同样的事情时，它不起作用。为什么不？可以修复吗？

document.querySelector('.button-click').addEventListener('click', () => {
  console.log('Event');
  document.querySelector('#my_list').click();
});

document.querySelector('.button-focus').addEventListener('click', () => {
  console.log('Event');
  document.querySelector('#my_list').focus();
});

<button class="button-click">Button to simulate click</button><br>
<button class="button-focus">Button to simulate focus</button><br>

<input list="list" id="my_list">
<datalist id="list">
  <option value="option1"></option>
  <option value="option2"></option>
 </datalist>

Answer 1

click() is not the correct method here. Use focus() 相反，它工作得很好。 focus() 模仿在 <input/> 内部实际单击的行为，而 click() 仅单击元素。

document.querySelector('button').addEventListener('click', () => {
  console.log('Event');
  document.querySelector('#my_list').focus(); // <-- change this method
});

<button>Button</button>

<input list="list" id="my_list">
<datalist id="list">
  <option value="option1"></option>
  <option value="option2"></option>
</datalist>

使用 javascript 模拟点击不适用于数据列表的输入

Simulate click with javascript does not work on input with datalist

javascript

click

html-datalist