FireFox中datalist需双击展开的兼容问题解决方案咨询

原始代码如下：

<input list="browsers" name="myBrowser" />
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Internet Explorer">
  <option value="Opera">
  <option value="Safari">
</datalist>

这段代码在Chrome、Edge、Safari中单击input即可展开datalist下拉选项，但Firefox中需要双击才能触发展开。要实现各浏览器行为统一，可通过以下JavaScript代码处理：

const targetInput = document.querySelector('input[name="myBrowser"]');

targetInput.addEventListener('click', function() {
  // 仅针对Firefox做特殊处理
  if (navigator.userAgent.includes('Firefox')) {
    // 通过先失焦再延迟聚焦的方式触发下拉展开
    this.blur();
    setTimeout(() => this.focus(), 0);
  }
});

原理说明 #

Firefox中input绑定datalist后，单击默认不会触发下拉展开，通过先让元素失焦再重新获取焦点，能触发浏览器的datalist下拉逻辑，从而和其他浏览器保持行为一致。判断浏览器类型是为了避免影响其他已正常工作的浏览器。

内容的提问来源于stack exchange，提问作者jeremyd