用户登录页面,用焦点事件验证用户名和密码是否为空。
页面事件
load事件:用于body内所有标签都加载完成后才触发,又因其无需考虑页面加载顺序的问题,常常在开发具体功能时添加。
unload事件:用于页面关闭时触发,经常用于清除引用避免内存泄漏时使用。
焦点事件
事件名称 | 事件触发时机 |
focus | 当获得焦点时触发(不会冒泡) |
blur | 当失去焦点时触发(不会冒泡) |
样式:
<style>
body {
background: #ddd;
}
.box {
background: #fff;
padding: 20px 30px;
width: 400px;
margin: 0 auto;
text-align: center;
}
.btn {
width: 180px;
height: 40px;
background: #3388ff;
border: 1px solid #fff;
color: #fff;
font-size: 14px;
}
.ipt {
width: 260px;
padding: 4px 2px;
}
.tips {
width: 440px;
height: 30px;
margin: 5px auto;
background: #fff;
color: red;
border: 1px solid #ccc;
display: none;
line-height: 30px;
padding-left: 20px;
font-size: 13px;
}
</style>
<body>
<div id="tips" class="tips"></div>
<div class="box">
<p><label>用户名:<input id="user" class="ipt" type="text"></label></p>
<p><label>密 码:<input id="pass" class="ipt" type="password"></label></p>
<p><button id="login" class="btn">登录</button></p>
</div>
<script>
window.onload = function () {
addBlur($('user')); // 检测id为user的元素失去焦点后,value值是否为空
addBlur($('pass')); // 检测id为pass的元素失去焦点后,value值是否为空
};
function $(obj) { // 根据id获取指定元素
return document.getElementById(obj);
}
function addBlur(obj) { // 为指定元素添加失去焦点事件
obj.onblur = function () {
isEmpty(this);
};
}
function isEmpty(obj) { // 检测表单是否为空
if (obj.value === '') {
$('tips').style.display = 'block';
$('tips').innerHTML = '注意:输入内容不能为空! ';
} else {
$('tips').style.display = 'none';
}
}
</script>
</body>
运行效果: