js实现焦点聚焦文本框

实现焦点聚焦文本框的方法

使用JavaScript聚焦文本框可以通过多种方式实现，以下是几种常见的方法：

方法1：使用focus()方法

通过DOM获取文本框元素后调用focus()方法：

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

方法2：通过CSS选择器获取元素

使用更灵活的CSS选择器方式：

document.querySelector('input[type="text"]').focus();

方法3：自动聚焦页面加载时的第一个文本框

在页面加载完成后自动聚焦：

window.onload = function() {
    document.querySelector('input[type="text"]').focus();
};

方法4：延迟聚焦解决渲染问题

某些框架需要延迟以确保DOM完全渲染：

setTimeout(() => {
    document.getElementById('textboxId').focus();
}, 100);

方法5：配合事件监听使用

点击按钮后聚焦文本框：

document.getElementById('focusButton').addEventListener('click', () => {
    document.getElementById('textboxId').focus();
});

注意事项

• 确保DOM完全加载后再执行聚焦操作，否则可能找不到元素
• 对于动态生成的元素，需要在元素插入DOM后再调用focus()
• 某些移动设备浏览器对自动聚焦有限制，可能需要用户交互触发
• 可配合select()方法同时选中文本内容：

  const input = document.getElementById('textboxId');
  input.focus();
  input.select();

这些方法覆盖了大多数需要实现文本框聚焦的场景，可根据具体需求选择合适的方式。