js实现聚焦

实现元素聚焦的 JavaScript 方法

使用 focus() 方法 通过调用 DOM 元素的 focus() 方法可以直接使元素获得焦点。适用于输入框、按钮等可聚焦元素。

document.getElementById('inputField').focus();

添加 autofocus 属性 在 HTML 中直接为元素添加 autofocus 属性，页面加载时会自动聚焦。

<input type="text" autofocus>

通过事件触发聚焦 结合事件监听实现条件触发聚焦，例如点击按钮后聚焦输入框。

document.getElementById('focusButton').addEventListener('click', () => {
  document.getElementById('targetInput').focus();
});

处理不可聚焦元素 默认不可聚焦的元素（如 div）需先设置 tabindex 属性才能聚焦。

<div id="customDiv" tabindex="0">点击可聚焦</div>
<script>
  document.getElementById('customDiv').focus();
</script>

兼容性注意事项 某些浏览器可能对 autofocus 或动态创建的元素的聚焦行为存在差异，建议在 DOMContentLoaded 事件后执行聚焦操作。

高级聚焦控制

检查当前聚焦元素 通过 document.activeElement 可获取当前获得焦点的元素。

const focusedElement = document.activeElement;

防止焦点丢失 监听 blur 事件可在元素失去焦点时重新聚焦（需谨慎使用避免体验问题）。

document.getElementById('inputField').addEventListener('blur', () => {
  this.focus();
});

焦点样式定制 通过 CSS 伪类 :focus 自定义聚焦时的视觉反馈。

input:focus {
  outline: 2px solid blue;
}

移动端兼容处理 部分移动设备需用户主动交互（如点击）后才能触发 focus()，可通过封装触摸事件解决。