焦点事件
编写HTML,实现用户登陆的表单。用 div 框架写出box,
并用 center 是表单居中。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<center>
<div id="tips"></div>
<div class="box">
<label >用户名:<input id="user" type="text"></label><br /><br />
<label >密   码:<input id="pass" type="password"></label><br /><br />
<button id="login" >登录</button>
</div>
</center>
(2)验证用户名和密码是否为空,利用 addBlur 添加 id 为 user 和 pass 中元素 value 值是否为空。
<script>
window.onload=function(){
addBlur($('user'));
addBlur($('pass'));
};
(3) 获取obj ,根据id 获取指定元素 然后判断该事件中焦点是否失去 ,表单中的元素是否为空。如果表单中元素为空,利用innerHTML,出现“ 注意:输入内容不能为空” ,反之,则不出现。
function $(obj){
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>
</html>