js实现焦点聚焦文本框
使用JavaScript实现文本框焦点聚焦
方法1：使用focus()方法
通过DOM获取文本框元素并调用focus()方法，将光标聚焦到指定文本框。
// 获取文本框元素
const inputElement = document.getElementById('myInput');
// 聚焦文本框
inputElement.focus();方法2：自动聚焦页面加载
在页面加载完成后自动聚焦到文本框，使用window.onload或DOMContentLoaded事件。
document.addEventListener('DOMContentLoaded', function() {
const inputElement = document.getElementById('myInput');
inputElement.focus();
});方法3：通过Tab索引控制
设置tabindex属性并通过focus()方法控制聚焦顺序。
<input type="text" id="input1" tabindex="1">
<input type="text" id="input2" tabindex="2">document.getElementById('input2').focus(); // 直接聚焦到第二个输入框方法4：延时聚焦
在某些场景下（如弹窗打开后），可能需要短暂延时再聚焦。
setTimeout(() => {
const inputElement = document.getElementById('myInput');
inputElement.focus();
}, 300); // 延时300毫秒后聚焦方法5：结合CSS伪类
通过CSS :focus伪类增强聚焦时的视觉效果，配合JavaScript使用。
input:focus {
border: 2px solid blue;
outline: none;
}注意事项
- 确保DOM加载完成后再执行聚焦操作，否则可能无效。
- 移动端设备中，某些浏览器可能需要用户交互（如点击）后才能触发聚焦。
- 对于动态生成的元素（如通过AJAX加载），需要在元素插入DOM后再调用
focus()。
