form元素值的操作获得和丧失焦点事件

最新推荐文章于 2023-04-15 22:17:37 发布

不仅是记忆

最新推荐文章于 2023-04-15 22:17:37 发布

阅读量526

点赞数

分类专栏： js 文章标签：获取焦点事件丧失焦点事件

本文链接：https://blog.csdn.net/a916123063/article/details/51769348

版权

js 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>form元素值的操作获得和丧失焦点事件</title>
</head>
<body>
    邮箱:<input type="text" value=""><br>
    用户名:<input type="text" id='username' value="iloveyouverymuch" style="padding:5px;"><span>请输入8~18位字母数字下划线</span><br>
 
    <script type="text/javascript">
    //获取元素
    var user = document.getElementById('username');
    //获取元素的值
    // var v = user.value;
 
    //值的设置
    // user.value = '三拉黑曜';
 
    //当元素处于激活状态的时候 会触发onfocus事件
    user.onfocus = function(){//focus 焦点
        //修改样式
        this.style.border = "solid 2px pink";
    }
 
    //丧失焦点事件
    user.onblur = function(){
        //获取当前元素的值
        var v = this.value;
        //声明正则
        var reg = /^\w{8,18}$/;
        //判断
        var res = reg.test(v);
        if(!res){
            alert('格式错误');
            this.style.border = "solid 2px red";
        }else{
            this.style.border = "solid 2px green";
        }
    }
 
 
 
 
    </script>
 
</body>
</html>

不仅是记忆

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
form元素值的操作获得和丧失焦点事件

form元素值的操作获得和丧失焦点事件邮箱: 用户名:请输入8~18位字母数字下划线 //获取元素 var user = document.getElementById('username'); //获取元素的值 // var v = user.value; //值的设置 // user.value = '三拉
复制链接

扫一扫