如何判断HTML <datalist>元素当前处于激活/展开状态？

一、JavaScript事件监听方案 #

<datalist>的展开行为完全依赖关联的<input>元素，浏览器没有为它提供直接的状态属性，但可以通过监听<input>及选项的事件间接判断：

• 聚焦/失焦事件初步判断：当<input>获得焦点时，用户有触发列表展开的可能；失去焦点时列表必然收起。但需注意，聚焦输入框不代表列表一定展开，仅作基础状态标记：

  const input = document.querySelector('input[list="my-datalist"]');
  let isDatalistOpen = false;
  
  input.addEventListener('focus', () => {
    isDatalistOpen = true;
  });
  
  input.addEventListener('blur', () => {
    isDatalistOpen = false;
  });
  

• 键盘/点击事件精准判断：用户按下向下箭头（keyCode 40）会触发列表展开，点击选项后列表会收起，结合这些事件能更精准捕捉状态：

  const input = document.querySelector('input[list="my-datalist"]');
  const datalistOptions = document.querySelectorAll('#my-datalist option');
  let isDatalistOpen = false;
  
  input.addEventListener('keydown', (e) => {
    if (e.keyCode === 40) {
      isDatalistOpen = true;
    }
  });
  
  datalistOptions.forEach(option => {
    option.addEventListener('click', () => {
      isDatalistOpen = false;
    });
  });
  

二、CSS伪元素的局限性 #

目前没有原生CSS伪元素能直接判断<datalist>的展开状态——它的下拉列表属于浏览器原生UI控件，不会在DOM树中暴露可被CSS选择的状态。仅能通过关联<input>的:focus伪类做间接样式关联，但这只能表示输入框聚焦，无法确认列表是否真的展开：

input[list="my-datalist"]:focus {
  border-color: #2196F3;
}

三、额外注意事项 #

• 不同浏览器对<datalist>的行为存在差异：部分浏览器在输入框聚焦后自动展开列表，部分则需要用户主动点击或按下箭头。
• 不存在可直接获取<datalist>展开状态的DOM API，浏览器未提供类似open的专属属性。

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