jq获得焦点focus,失去焦点blur,change()函数,js的onfocus,onblur,onchange()方法

最新推荐文章于 2024-04-18 23:22:15 发布

半夏ing

最新推荐文章于 2024-04-18 23:22:15 发布

阅读量5.0k

点赞数 2

分类专栏： jquery js 文章标签：函数 javascript 表单

本文链接：https://blog.csdn.net/Fiona_lms/article/details/77141126

版权

js 同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

jquery

9 篇文章 0 订阅

订阅专栏

今天在家没什么事，就想写一篇关于焦点的博客。

1、焦点事件来判断输入框是否为空

示意图：

这里写图片描述

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>form表单验证</title>
    <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
   <div>
         姓名<input id="test1" type="text"/>
    </div>
</body>
</body>
<script type="text/javascript">
    $(function(){
        $("input").focus(function(){
            $("input").css("background-color","red");
        });
        $("input").blur(function(){
            $("input").css("background-color","#D6D6FF");
            var input_val = $('#test1').val();
            if(!input_val){
                alert("姓名不能为空");
            }
        });
    })()
</script>
</html>

2、验证两次输入的密码是否一致

示意图：

这里写图片描述

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>form表单验证</title>
    <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
    <style>
        *{
            margin:0px;
            padding:0px;
        }
        input{
            width:200px;
            height:25px;
            margin-bottom: 5px;
        }
        #test1{
            margin-left: 15px;
        }
    </style>
</head>
<body>
   <div>
         新密码<input id="test1" type="text"/><br>
         确认密码<input id="test2" type="text" onchange="Verificate()"/>
    </div>
</body>
</body>
<script type="text/javascript">
       function Verificate(){
           var input1_val = $('#test1').val();
           var input2_val = $('#test2').val();
           if(input2_val == input1_val){
               alert("密码一致");
           }else{
               alert("两次密码要一致哦")
           }
       }
</script>
</html>

就举这两个例子了，chang()和onfocus()、onblur()用法都类似，就不在此多说了。

半夏ing

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
jq获得焦点focus,失去焦点blur,change()函数,js的onfocus,onblur,onchange()方法

jq获得焦点focus,失去焦点blur,change()函数,js的onfocus,onblur,onchange()方法
复制链接

扫一扫