<!DOCTYPE html><html><head> <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"> // 补充代码 window.onload()=function() { var name=document.getElementsByTagName("input")[0]; var word=document.getElementsByTagName("span")[0]; name.onfocus=function() { if(this.value="") { this.innerHTML="请输入你的名字"; } } word.onblur=function() { if(this.value=="") { this.innerHTML="用户名不能为空"; this.className="red"; } else { this.innerHTML=""; } } } </script></body></html>
1 回答
奋斗好青年
TA贡献69条经验 获得超30个赞
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>onblur和onfocus</title>
<style type="text/css">
.red {
border: 1px solid red;
}
</style>
</head>
<body>
姓名：<input type="text" placeholder=""> <span></span>
<script type="text/javascript">
window.onload = function () {
var name = document.getElementsByTagName("input")[0];
var word = document.getElementsByTagName("span")[0];
name.onfocus = function () {
if (this.value == "") {
word.innerHTML = "请输入你的名字";
}
}
name.onblur = function () {
if (this.value == "") {
word.innerHTML = "用户名不能为空";
this.className = "red";
}
else {
word.innerHTML = "";
name.className = "";
}
}
}
</script>
</body>
</html>看了一下你写的好多错误呀.
window.onload()=function() 改成 window.onload=function()
name.onfocus里面的if判断是否为空应该是==,而不是=,一个=是赋值的意思;
第一个if里面的,你要判断的是input,鼠标移入输入框的时候,span提示信息吧,所以不能用this,改成word;
word.onblur改成name.onblur,因为你是要判断选框失去焦点的状态;
第二个if失去焦点的提示也是改成word.innerHTML;else加上如果有内容离开时候删掉类;
如果你的问题已解决,请记得采纳!
添加回答
举报
0/150
提交
取消