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

不仅是记忆

于 2016-06-27 16:35:37 发布

阅读量617

点赞数

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

本文链接：https://blog.youkuaiyun.com/a916123063/article/details/51769348

版权

js 专栏收录该内容

20 篇文章

订阅专栏

本文介绍了一个简单的HTML表单示例，展示了如何使用JavaScript来处理表单元素的聚焦与失焦事件，实现输入验证功能。通过修改边框颜色来提示用户输入的状态，帮助用户了解输入是否符合要求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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>