js 实现focus

实现元素聚焦的方法

使用JavaScript实现元素聚焦可以通过调用元素的focus()方法完成。以下是几种常见场景的实现方式：

基础聚焦

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

延迟聚焦

setTimeout(() => {
  document.querySelector('.search-box').focus();
}, 1000);

条件聚焦

if (shouldFocus) {
  const element = document.getElementById('conditional-input');
  element.focus();
}

处理焦点事件

可以监听焦点相关事件来实现更复杂的交互：

焦点事件监听

const input = document.getElementById('email-input');
input.addEventListener('focus', () => {
  console.log('元素获得焦点');
});
input.addEventListener('blur', () => {
  console.log('元素失去焦点');
});

自定义焦点样式

通过CSS配合实现视觉反馈：

.focused {
  box-shadow: 0 0 5px rgba(81, 203, 238, 1);
  border: 1px solid rgba(81, 203, 238, 1);
}

input.addEventListener('focus', function() {
  this.classList.add('focused');
});
input.addEventListener('blur', function() {
  this.classList.remove('focused');
});

表单自动聚焦

实现表单字段的自动跳转：

const inputs = document.querySelectorAll('.form-input');
inputs.forEach((input, index) => {
  input.addEventListener('input', function() {
    if (this.value.length === this.maxLength) {
      if (inputs[index + 1]) {
        inputs[index + 1].focus();
      }
    }
  });
});

兼容性注意事项

某些元素需要设置tabindex属性才能获得焦点：

<div id="focusable-div" tabindex="0">可聚焦元素</div>

document.getElementById('focusable-div').focus();

对于动态创建的元素，需要确保DOM加载完成后再尝试聚焦：

document.addEventListener('DOMContentLoaded', () => {
  document.getElementById('dynamic-element').focus();
});