焦点事件 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="tips"></div><!--用于显示错误提示信息-->
<div class="box">
    <label>用户名：<input id="user" type="text"></label>
    <label>密码：<input id="pass" type="password"></label>
    <button id="login">登录</button>
</div>
</body>
</html>
<script>
  17.  window.onload=function () {
addBlur($('user'));//检测id为user的元素失去焦点后，value值是否为空
addBlur($('pass'));//检测id为pass的元素失去焦点后，value值是否为空
    };
  21.  function $(obj) {//根据id获取指定元素
        return document.getElementById(obj);
    }
  24.  function addBlur(obj) {//为指定元素添加失去焦点事件
        obj.onblur=function () {
            isEmpty(this);
        };
    }
  29.  function isEmpty(obj) {//检测表单是否为空
if (obj.value === ''){
    $('tips').style.display='block';
    $('tips').innerHTML = '注意：输入内容不能为空！';
}else {
    $('tips').style.display='none';
}
    }
</script>
以上代码时以验证用户名和密码是否为空进行演示

 

 

 

 

 

 

 


在Web开发中，焦点事件多用于表单验证功能，最常用的事件之一。
例如：文本框获取焦点改变文本框的样式，文本框失去焦点时验证文本框内输入的数据等。
常用焦点事件如下所示：
事件名称：  事件触发时机
focus：    当获得焦点时触发（不会冒泡）
blur：     当失去焦点时触发（不会冒泡）




验证用户名与验证码是否为空
1：17-20行代码用于在页面加载完成后，调用自定义函数检测用户名和密码是否为空；
2：第21-23行代码封装的$()函数用于根据id值获取元素对象，方便程序开发；
3：第24-28行代码封装的addBlur()函数，用于为指定元素添加失去焦点事件及其事件处理程序；
4：第29-36行代码用于检测指定元素对象obj的value值是否为空，若为空，则显示错误提示信息，否则隐藏提示信息框。

posted @ 2021-12-25 21:33  一克嗽  阅读(78)  评论(0)    收藏  举报