（onfocus和onblur的运用）
实现效果：
进入网页.jpg
点击输入框后显示：
点击输入框后.jpg
失去焦点后有输入名字显示：
失去焦点时有输入名字.jpg
失去焦点后没有输入名字则显示：
失去焦点时没有输入名字.jpg
附上代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>onblur和onfocus</title>
<style type="text/css">
.red{
border:1px solid red;
}
</style>
</head>
<body>
姓名：<input type="text"> <span></span>
<script type="text/javascript">
//获取文本框和提示框
var inputs=document.getElementsByTagName("input")[0],
tip=document.getElementsByTagName("span")[0];
//给文本框绑定获得焦点的事件
inputs.onfocus=function(){
if(inputs.value==""){
tip.innerHTML="请输入您的姓名";
}
}
//给文本框绑定失去焦点的事件
inputs.onblur=function(){
if(inputs.value==""){
tip.innerHTML="用户名不能为空";
inputs.className="red";
}
else{
tip.innerHTML="";
tip.removeAttribute("class");
}
}
</script>
</body>
</html>
网友评论