jquery 绑定事件 - blur() 失去焦点 - focus() 获取焦点

Devops海洋的渔夫

发布于 2019-05-30 13:54:00

12.5K00

代码可运行

文章被收录于专栏：Devops专栏Devops专栏

运行总次数：0

代码可运行

事件函数列表

blur() 元素失去焦点
focus() 元素获得焦点
click() 鼠标单击
mouseover() 鼠标进入（进入子元素也触发）
mouseout() 鼠标离开（离开子元素也触发）
mouseenter() 鼠标进入（进入子元素不触发）
mouseleave() 鼠标离开（离开子元素不触发）
hover() 同时为mouseenter和mouseleave事件指定处理函数
ready() DOM加载完成
resize() 浏览器窗口的大小发生改变
scroll() 滚动条的位置发生变化
submit() 用户递交表单

编写一个form表单，用来演示输入框获取焦点和失去焦点的示例

好了，有了基本的HTML架构之后，就可以来演示了。

focus() 元素获得焦点

首先先来这个focus()函数。

可以看到当获取焦点的时候，就立即弹出alert()。其实通过focus()函数只是简单用来初始化文本框的焦点输入的而已，如下：

当刚进入页面，文本框就自动获取焦点，这基本上就是这个方法的大部分用法了。

blur() 元素失去焦点

使用blur()失去焦点这个方法一般会结合获取文本框内容的函数一起使用，如下：

当获取到文本框内的值之后，就可以对其进行正则验证或者其他方式的校验。那么这里有一个疑问，就是密码框输入内容的话，能否获取到值呢？

密码框也是可以正常获取值的。

完整代码

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <script type="text/javascript" src="jquery/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
        $(function(){
            $('#username').focus();

            $('#username').blur(function(){
                // alert($(this).val());
            })

            $('#password').blur(function(){
                alert($(this).val());
            })
        })
    </script>
    <style type="text/css">
        
    </style>
</head>
<body>
    <form action="#">
        <!-- label{用户名}+input.user+br+label{密码}+input.pwd -->
        <label for="username">用户名</label>
        <input type="text" id="username">
        <br>
        <label for="password">密&nbsp&nbsp&nbsp码</label>
        <input type="password" id="password">
        <br>
        <input type="submit" name="" value="提交">
    </form>
</body>
</html>