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()。