jQuery - 事件(四)之 表单事件

表单事件,主要是对表单元素获得焦点、失去焦点和内容改变时做出反应。

本文目录:

  1. focus();
  2. blur();
  3. change()。

focus(handler)

元素获得焦点时执行的事件处理函数。

参数 类型 描述
handler Function 必选。事件触发时执行的函数。

blur(handler)

元素失去焦点时执行的事件处理函数。
注意: 失去焦点是指元素在获得焦点之后再失去焦点。

参数 类型 描述
handler Function 必选。事件触发时执行的函数。

代码:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>事件01_焦点</title>
    <script src="js/jquery-1.10.2.min.js"></script>
</head>
<body>
<input type="text">
<script>
    $(function () {
        // 获得焦点
        $("input:eq(0)").focus(function(){
            alert("获得焦点");
        });

        // 失去焦点
        $("input").eq(0).blur(function(){
            alert("失去焦点");
        });
    });
</script>
</body>
</html>

效果演示:

focus()和blur().gif

change(handler)

元素内容改变时执行的事件处理函数。

参数 类型 描述
handler Function 必选。事件触发时执行的函数。

下面的内容中,改变输入框的内容,当按下回车键或输入框失去焦点时,将会弹窗,弹窗的内容为输入的内容。

代码:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>事件11_change()</title>
    <script src="js/jquery-1.10.2.min.js"></script>
</head>
<body>
<input type="text">
<script>
    $(function () {
        // 内容改变
        $("input").change(function(){
            alert($(this).val());
        });
    });
</script>
</body>
</html>

效果演示:

change().gif

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 总结: 鼠标事件 1.click与dbclick事件$ele.click()$ele.click(handler(...
    阿r阿r阅读 1,646评论 2 10
  • 第1章 鼠标事件 1-1 jQuery鼠标事件之click与dbclick事件 用交互操作中,最简单直接的操作就是...
    mo默22阅读 1,310评论 0 6
  • (续jQuery基础(1)) 第5章 DOM节点的复制与替换 (1)DOM拷贝clone() 克隆节点是DOM的常...
    凛0_0阅读 1,386评论 0 8
  • 不知道你们有没有被卡过,反正我是有!而且不止一次! <一> 前阵子进出小区门总是被门禁设备突然卡住,同行的人就一直...
    沐阳丫头阅读 331评论 2 2
  • 昨晚上课,也许是昨天一天太忙了,中午带孩子去练字,也没有歇会,昨晚状态不好,再听其他老师的分享,让我好自...
    袁瑞红阅读 125评论 0 0