jQuery 绑定3种表单事件 change(value值改变)，focus(获到焦点)，blur(失去焦点)

痛定思痛。 2023-10-05 09:27 35阅读 0赞

#### 1 change() ####

说明：元素的value值改变时，触发change事件。change事件只适用于文本框（text）、文本域（textarea）、下拉框（select）元素。

语法：

$(selector).change(function1);

实例：

文本框、文本域、下拉框绑定change事件。

$(function(){
        //文本框绑定change事件
        $("input[type=text]").each(function(){
            $(this).change(function(){
                alert("text change");
            });
        });
        //文本域绑定change事件
        $("textarea").each(function(){
            $(this).change(function(){
                alert("textarea change");
            });
        });
        //下拉框绑定change事件
        $("select").each(function(){
            $(this).change(function(){
                alert("select change");
            });
        });
    });

#### 2 focus() ####

说明：当元素获得焦点时（当通过鼠标点击选中元素或通过 tab 键定位到元素时），触发 focus 事件。

语法：

$(selector).focus(function1);

实例：

文本框绑定focus事件。

$(function(){
        $("input[type=text]").each(function(){
            $(this).focus(function(){
                alert("text focus");
            });
        });
    });

注：该事件通常与 blur 事件一起使用。

#### 3 blur() ####

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

语法：

$(selector).blur(function1);

实例：

文本框绑定blur事件。

$(function(){
        $("input[type=text]").each(function(){
            $(this).blur(function(){
                alert("text blur");
            });
        });
    });

注：该事件通常与 focus 事件一起使用。