实现网站键盘快捷键：如何更优雅判断可输入HTML标签？

云上老周

2026-6-26

优化方案

你可以通过以下两种更简洁的方式实现需求，充分利用Chromium支持的API来简化代码：

方法一：利用元素属性与类型排除

window.addEventListener('keypress', (e) => {
  const activeEl = document.activeElement;
  // 判断当前激活元素是否为可编辑文本区域
  const isEditable = activeEl && (
    // 排除不可输入文本的input类型，剩下的都是可输入的
    (activeEl.tagName === 'INPUT' && !['button', 'checkbox', 'radio', 'submit', 'reset', 'file'].includes(activeEl.type)) ||
    activeEl.tagName === 'TEXTAREA' ||
    activeEl.isContentEditable
  );

  if (isEditable) return;

  // 快捷键执行逻辑
});

优化点说明：

用isContentEditable替代原代码中对attributes.contenteditable的判断，这是元素原生的布尔属性，直接反映元素是否可编辑，更可靠简洁。
对input类型采用排除法：只列出不可输入文本的类型（如按钮、复选框等），比逐一罗列可输入类型更高效，还能自动兼容未来新增的input文本类型。
简化activeElement的获取方式，逻辑更清晰。

方法二：使用CSS选择器匹配

利用Chromium支持的Element.matches()方法，直接用CSS选择器精准匹配所有可编辑元素：

window.addEventListener('keypress', (e) => {
  const activeEl = document.activeElement;
  // 匹配所有可输入文本的元素
  if (activeEl?.matches(
    'input:not([type="button"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="reset"]):not([type="file"]), textarea, [contenteditable="true"]'
  )) {
    return;
  }

  // 快捷键执行逻辑
});