JavaScript中无法直接获取所有处于焦点的输入框，因浏览器同一时刻仅允许一个元素聚焦；可通过监听focus/blur事件用Set记录逻辑焦点，或用document.activeElement判断真实焦点元素。
JavaScript 中没有直接获取“所有处于焦点状态的输入框”的 API，因为同一时刻浏览器中只能有一个元素拥有焦点（document.activeElement 返回唯一元素）。但如果你需要检测或管理多个可能获得过焦点的输入框（例如表单中用户曾点击/切换过的 <input>、<textarea>、<select> 等），可以通过监听和记录的方式实现。
监听 focus 和 blur 事件，动态维护焦点历史
这是最常用且可控的方法：为所有目标输入框绑定事件，用 Set 或数组记录当前有焦点的元素（或最近聚焦过的元素）。
- 使用
Set可避免重复，适合跟踪「当前正在被操作」的输入框（注意：严格来说仍只有一个真正聚焦，但可用于模拟多焦点场景） - 若想记录「用户曾经聚焦过的所有输入框」，可往数组中 push，配合去重逻辑
- 示例代码：
const focusedInputs = new Set();
document.querySelectorAll('input, textarea, select').forEach(el => {
el.addEventListener('focus', () => focusedInputs.add(el));
el.addEventListener('blur', () => focusedInputs.delete(el));
});
// 获取当前被标记为“已聚焦过”且尚未失去焦点的元素（即仍在 focus 状态的）
const currentlyFocusedInputs = Array.from(focusedInputs);
// 注意：这不等于 DOM 真实焦点状态，而是你手动维护的逻辑状态
检查 document.activeElement 是否属于输入类元素
这是判断「此刻哪个输入框有真实焦点」的标准方式，适用于校验、自动提交、无障碍等场景。
-
document.activeElement始终返回当前获得焦点的 DOM 元素 - 结合
matches()判断它是否是输入类元素 - 示例：
function getCurrentlyFocusedInput() {
const active = document.activeElement;
if (active && active.matches('input, textarea, select, [contenteditable]')) {
return active;
}
return null;
}
// 调用
const focusedInput = getCurrentlyFocusedInput();
if (focusedInput) {
console.log('当前聚焦的输入框：', focusedInput);
}
批量查询并筛选出“可能获得焦点”的输入框（非实时焦点，而是候选集合）
有时你想要的是「页面中所有可聚焦的输入框」，用于初始化、高亮、或后续监听，而非真正在焦点中的元素。
立即学习“Java免费学习笔记（深入）”；
- 用
querySelectorAll获取全部可交互输入控件 - 过滤掉
disabled或readonly（按需） - 示例：
const allFocusableInputs = Array.from(
document.querySelectorAll('input:not([disabled]), textarea:not([disabled]), select:not([disabled])')
).filter(el => !el.hasAttribute('readonly') || el.tagName === 'TEXTAREA');
注意 tabindex 和 contenteditable 的兼容性
除了标准表单控件，还要考虑自定义可聚焦元素：
- 带
tabindex属性的元素（如div tabindex="0"）也能获得焦点 -
contenteditable="true"的元素也属于可聚焦输入类 - 若业务需要统一管理，建议扩展选择器：
input, textarea, select, [contenteditable], *[tabindex]:not([tabindex="-1"])
