教程：怎么结合 CSS 伪类（如 :focus）利用 matches 判定当前节点聚焦状态-js教程-PHP中文网

直接用element.matches(':focus')可判断元素是否聚焦，但需确保其为可聚焦元素（如input、button）或已设tabindex；普通div需加tabindex="0"或"-1"且已渲染、可见，否则总返回false。

教程：怎么结合 css 伪类（如 :focus）利用 matches 判定当前节点聚焦状态

直接用 element.matches(':focus') 就能判断一个元素当前是否获得焦点，前提是它可聚焦且已渲染在页面中。

确保元素本身支持聚焦

不是所有元素默认能聚焦。原生可聚焦的只有、、、等表单控件。普通

 或  需显式添加 tabindex 属性：

tabindex="0"：允许用户用 Tab 键进入，也支持脚本调用 .focus()

  
tabindex="-1"：仅支持脚本聚焦（如 el.focus()），不能通过 Tab 切入
  避免使用正数 tabindex，容易打乱自然导航顺序

matches(':focus') 的实际用法
该方法返回布尔值，适合做条件判断或事件过滤：

if (input.matches(':focus')) { console.log('输入框正在聚焦'); }
  配合事件委托时，精准识别目标：e.target.matches('input:focus, textarea:focus')

  注意：它只反映“此刻”状态，不监听变化；要响应焦点切换，仍需 focus / blur 事件

常见失效原因与检查点
如果 matches(':focus') 总是返回 false，优先排查以下情况：

											
												
												
													CSS婚礼策划服务机构宣传网站模板
													CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。
												
												下载
												
											
										

元素未插入文档（比如刚创建还没 appendChild）
  被设为 display: none 或 visibility: hidden

  父容器有 pointer-events: none 或 disabled 属性
  在 iframe 或 Shadow DOM 内部，document.activeElement 可能不指向预期元素
  用开发者工具选中元素，在 Styles 面板手动勾选 :focus，看样式是否生效——若不生效，说明聚焦根本没成功

:focus 和 :focus-visible 的区别别搞混
matches(':focus') 检测的是通用焦点状态，而 matches(':focus-visible') 只在键盘导航（如 Tab）触发时为真：

鼠标点击后调用 .focus() → 触发 :focus，但不触发 :focus-visible

  按 Tab 键进入元素 → 同时触发两者
  不要用 :focus-visible 替代 :focus 做基础校验，兼容性也更受限（旧版 Safari 不支持）

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！