当前位置：首页 > JavaScript

js实现焦点聚焦文本框

2026-03-02 02:08:25JavaScript

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

使用 focus() 方法

通过 JavaScript 的 focus() 方法可以直接让文本框获得焦点。需要先获取文本框的 DOM 元素。

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

自动聚焦页面加载

在页面加载完成后自动聚焦到文本框，可以通过 window.onload 或 DOMContentLoaded 事件实现。

window.onload = function() {
    document.getElementById('textbox').focus();
};

或者使用 addEventListener：

document.addEventListener('DOMContentLoaded', function() {
    document.getElementById('textbox').focus();
});

使用 autofocus 属性

HTML5 提供了 autofocus 属性，可以直接在文本框元素上设置，无需 JavaScript。

js实现焦点聚焦文本框

<input type="text" id="textbox" autofocus>

动态创建文本框并聚焦

如果需要动态创建文本框并立即聚焦，可以通过以下代码实现。

const textbox = document.createElement('input');
textbox.type = 'text';
document.body.appendChild(textbox);
textbox.focus();

延迟聚焦

在某些情况下，可能需要延迟聚焦，可以使用 setTimeout 实现。

js实现焦点聚焦文本框

setTimeout(function() {
    document.getElementById('textbox').focus();
}, 1000);

检查焦点状态

可以通过 document.activeElement 检查当前聚焦的元素是否为文本框。

if (document.activeElement === document.getElementById('textbox')) {
    console.log('文本框已聚焦');
}

处理焦点事件

可以为文本框添加 focus 和 blur 事件监听器，实现更复杂的交互逻辑。

const textbox = document.getElementById('textbox');
textbox.addEventListener('focus', function() {
    console.log('文本框获得焦点');
});
textbox.addEventListener('blur', function() {
    console.log('文本框失去焦点');
});

以上方法涵盖了常见的文本框聚焦需求，可以根据具体场景选择合适的方式。

标签: 文本框焦点

分享给朋友：

css焦点图制作

使用纯CSS制作焦点图 HTML结构采用无序列表包裹图片，通过绝对定位实现层叠效果 <div class="slider"> <ul> <li><…