jquery 聚焦

jQuery 聚焦方法

使用 jQuery 实现元素聚焦可以通过 focus() 方法完成。该方法触发元素的焦点事件或绑定焦点事件的处理函数。

触发聚焦事件

$("#elementId").focus();

绑定聚焦事件处理函数

$("#elementId").focus(function() {
    // 聚焦时执行的代码
    console.log("元素获得焦点");
});

自动聚焦到输入框

页面加载时自动聚焦到指定输入框：

$(document).ready(function() {
    $("#username").focus();
});

聚焦与失焦事件结合

通常聚焦 (focus) 与失焦 (blur) 事件会一起使用：

$("#email").focus(function() {
    $(this).css("border-color", "blue");
}).blur(function() {
    $(this).css("border-color", "");
});

动态元素聚焦

对于动态添加的元素，使用事件委托实现聚焦：

$(document).on("focus", ".dynamic-input", function() {
    $(this).addClass("active");
});

注意事项

• 某些元素（如 div）默认不可聚焦，需先设置 tabindex 属性
• 聚焦行为可能被浏览器安全策略限制，如跨域 iframe 内的元素
• 移动端设备上聚焦可能自动触发虚拟键盘弹出