应使用 input[type=”text”] 精准匹配文本输入框，注意必须用英文双引号、全小写；推荐结合语义化类名（如 input.username）并辅以 matches() 运行时校验，避免误选 password/search 等类型或动态插入的非目标元素。
用 input[type="text"] 直接匹配文本输入框
多数表单输入框是 ，浏览器原生支持按 type 属性筛选。css 选择器或 javaScript 的 querySelector 都能直接用：input[type="text"]。注意引号必须是英文双引号（"text"），单引号或不加引号在部分旧浏览器中会失效。
常见错误是写成 input[type=text]（无引号）——html5 允许省略，但 CSS 选择器规范要求带引号；或者误写为 input[type="TEXT"]（大小写敏感），实际值全小写。
-
document.querySelector('input[type="text"]')只取第一个匹配项 -
document.querySelectorAll('input[type="text"]')返回 nodeList，适合批量操作 - 该选择器不匹配
或type="email"/"number"等其他类型，需显式扩展
类名（class）和类型组合使用更可靠
仅靠 type 不够：有些项目用 type="text" 但语义上是搜索框、密码提示栏等；有些则用自定义组件（如 type="hidden" + 可见 wrapper）。此时加类名限定更精准，例如 input.form-control[type="text"] 或 input.input-username。
关键点在于类名要真实存在于 dom 中，且避免过度依赖 BEM 或框架生成的长类名（如 form__field--primary），这类命名易变，维护成本高。
- 推荐用语义化短类名：
input.username、input.email-field - 多个条件同时满足时，空格不能漏：
input.user-input[type="text"]（无空格）表示“同时具备”；input.user-input [type="text"]（有空格）变成后代选择器，完全跑偏 - 若类名含连字符（如
login-input），无需转义，直接写input.login-input[type="text"]
避开 input[type="password"] 和 input[type="search"] 的干扰
看起来都是“可输入文本”，但行为和样式常不同：type="password" 默认屏蔽内容、可能触发密码管理器；type="search" 在 safari 中带清除按钮、默认圆角。如果目标只是普通文本输入，硬写 input[type] 通配会误选。
稳妥做法是显式排除或单独处理：
- 排除密码框：
input[type="text"]:not([type="password"])—— 实际无效，因为一个元素不会同时有两个type值；正确写法是只写input[type="text"]，别加:not - 真正需要排除时，用类名区分：
input.text-field:not(.password-field) - 搜索框通常有独立类名（如
.search-input），不参与通用文本框逻辑，建议从一开始就不混用选择器
javascript 中用 Element.matches() 做运行时校验
DOM 动态变化时（比如 vue/react 组件重渲染、ajax 插入新字段），光靠初始选择器可能失效。可在事件回调里用 matches() 二次确认：
input.addEventListener('focus', function(e) { if (e.target.matches('input.text-field[type="text"]')) { // 确保是目标输入框才执行逻辑 } });这个方法比反复调用 querySelectorAll 轻量，也比检查 className 字符串更准确（支持多类名、顺序无关）。
-
matches()在 IE 中需用msMatchesSelector回退，但现代项目基本可忽略 - 注意不要在循环中对大量节点重复调用 —— 若已知父容器固定，优先用事件委托 +
closest() - 如果输入框被封装成 Web Component，
matches()只作用于宿主元素，内部 shadow DOM 需另配shadowRoot.querySelector
实际项目里最常出问题的，不是选不中，而是选得太宽——比如把自动填充的隐藏字段、框架注入的辅助输入框也卷进来了。类名+type 双约束是底线，运行时校验是保险绳。