jquery 聚焦

jQuery 聚焦方法

使用 jQuery 实现元素聚焦（focus）可以通过多种方式完成，以下是常见的方法：

直接调用 focus() 方法
对选中的元素调用 focus() 方法即可使其获得焦点：

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

通过事件触发聚焦
可以在某些事件（如点击按钮）后触发聚焦：

$("#buttonId").click(function() {
    $("#inputId").focus();
});

自动聚焦页面加载时的元素
在页面加载完成后自动聚焦到指定元素：

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

动态生成的元素聚焦
对于动态生成的元素，需确保在元素存在后调用 focus()：

$(document).on("click", "#dynamicButton", function() {
    $("#dynamicInput").focus();
});

聚焦相关事件

focus 事件
当元素获得焦点时触发：

$("#inputId").on("focus", function() {
    console.log("Input focused");
});

blur 事件
当元素失去焦点时触发：

$("#inputId").on("blur", function() {
    console.log("Input lost focus");
});

聚焦样式调整

可以通过 CSS 或 jQuery 修改聚焦时的样式：

$("#inputId").focus(function() {
    $(this).css("border", "2px solid blue");
});

聚焦验证示例

在表单验证中，聚焦可用于提示用户修正错误：

$("#submitBtn").click(function() {
    if (!$("#email").val()) {
        $("#email").focus();
        alert("Email field is required");
    }
});