js 实现focus
实现元素聚焦的方法
在JavaScript中，可以通过多种方式实现元素的聚焦（focus）效果。以下是几种常见的方法：
使用focus()方法
最基本的聚焦方法是调用元素的focus()方法。该方法适用于可聚焦的元素，如<input>、<textarea>、<button>等。
const inputElement = document.getElementById('myInput');
inputElement.focus();设置autofocus属性
对于HTML5兼容的浏览器，可以直接在HTML元素上设置autofocus属性，使元素在页面加载时自动获得焦点。
<input type="text" id="myInput" autofocus>使用tabIndex属性
对于默认不可聚焦的元素（如<div>、<span>等），可以通过设置tabIndex属性使其可聚焦。
const divElement = document.getElementById('myDiv');
divElement.tabIndex = 0;
divElement.focus();处理聚焦事件
可以监听focus和blur事件来处理聚焦和失焦时的逻辑。
const inputElement = document.getElementById('myInput');
inputElement.addEventListener('focus', function() {
console.log('Input focused');
});
inputElement.addEventListener('blur', function() {
console.log('Input lost focus');
});聚焦第一个有效元素
在表单中，可以自动聚焦到第一个可聚焦的元素。
const form = document.querySelector('form');
const firstFocusable = form.querySelector('input, textarea, button, select');
if (firstFocusable) {
firstFocusable.focus();
}使用requestAnimationFrame
在某些情况下（如元素刚被添加到DOM时），可能需要使用requestAnimationFrame来确保聚焦成功。
const newInput = document.createElement('input');
document.body.appendChild(newInput);
requestAnimationFrame(() => {
newInput.focus();
});处理iOS Safari的特殊情况
在iOS Safari中，有些情况下需要用户交互才能触发聚焦。可以在点击事件处理程序中调用focus()。
document.getElementById('myButton').addEventListener('click', function() {
document.getElementById('myInput').focus();
});聚焦时的样式变化
可以使用CSS的:focus伪类来改变元素获得焦点时的样式。
input:focus {
border-color: blue;
box-shadow: 0 0 5px rgba(0, 0, 255, 0.5);
}以上方法涵盖了JavaScript中实现元素聚焦的主要技术，可以根据具体需求选择合适的方式。
