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();
});
