JQuery事件之表单事件

表单事件包括四个方法:submit()方法、change()方法、focus()方法、blur()方法

一、submit()方法

当提交表单时,会发生submit事件

该事件只适用于<form>元素,submit()方法触发submit事件。或规定当发生submit事件时运行的函数。

实例:

<script>

$(document).ready(function(){

    $("form").submit(function(){

        alert("提交");

    });

});

    </script>

</head>

<body>

<form action="">

    First Name:

    <input type="text" name="FirstName" value="高">

    Lastname:

    <input type="text" name="lastname" value="才磊">

    <input type="submit" value="提交">

 

</form>

</body>

 二、change()方法

当元素的值改变时发生change事件(仅适用于表单字段)

Change()方法触发change事件。或规定当发生change事件时运行的函数。

注意:当用于select元素时。change事件会在选择某个选项时发生。当用于text fieldtext area时,change事件会在元素失去焦点时发生。

实例:

<script>

 

$(document).ready(function(){

    $("input").change(function(){

        alert("文本已被修改");

    });

});

    </script>

</head>

<body>

<input type="text">

<p>在输入框输入一些东西。敲回车或点击输入框外部</p>

</body>

触发被选元素的 change 事件:语法:     $(selector).change()

点击按钮触发 change 事件 (即使元素没有改变)。

 实例:

<script>

 

$(document).ready(function(){

    $("button").click(function(){

        $("input").change();

    });

});

    </script>

</head>

<body>

<p>点击按钮触发change事件。即使元素没有被改变</p>

<button>输入框中触发change事件</button>

<p>输入你的名字 <input type="text" value="码磊" onchange="alert(this.value)"> </p>

添加函数到 change 事件:语法:$(selector).change(function)

实例:

// 添加函数到 change 事件:

<script>

 

$(document).ready(function(){

    $(".field").change(function(){

        $(this).css("background-color","pink");

    });

});

    </script>

</head>

<body>

<p>元素改变后执行一个函数</p>

输入:<input type="text" class="field">

<p>在输入框中写一些东西,按下回车,或点击输入框外的区域,输入框的颜色会改变</p>

<p>选择:

    <select name="do" class="field">

        <option value="吃饭">吃饭</option>

        <option value="睡觉">睡觉</option>

        <option value="打豆豆">打豆豆</option>

    </select>

</p>

<p>在下拉列表选择一个选项,列表的颜色会改变</p>

</body>

 三、focus方法

当元素获得焦点时,(当通过鼠标点击选中元素或通过tab键定位到元素时),发生focus事件。Focus()方法触发focus事件,或规定当发生focus事件时运行的函数。

该方法常与blur()方法一起使用。

实例:

// 3.focus()方法

 <script>

$(document).ready(function(){

    $("input").focus(function(){

      $("span").css("display","inline").fadeOut(2000);

    });

});

    </script>

</head>

<body>

 

点击输入框获取焦点:<input type="text">

<span>请输入</span>

</body>

触发被选元素的focus事件:

$(selector).focus()

实例:

/ 触发被选元素的focus事件:

<script>

 

$(document).ready(function(){

    $("#btn1").click(function(){

       $("input").focus();

    });

    $("#btn2").click(function(){

        $("input").blur();

    });

});</script>

</head>

<body>

输入你的名字:<input type="text"><br /><br />

<button id="btn1">触发focus事件</button>

<button id="btn2">触发blur事件</button>

</body>

添加函数到 focus 事件:$(selector).focus(function)

实例:

// 添加函数到 focus 事件:

<script>

 

$(document).ready(function(){

    $("input").focus(function(){

        $(this).css("background-color","yellow");

    });

    $("input").blur(function(){

        $(this).css("background-color","pink");

    });

});

    </script>

</head>

<body>

name:  <input type="text" name="fullname">

email: <input type="text" name="em">

 

原文地址:https://www.cnblogs.com/maleijiejie/p/13434444.html