请问这样可以吗
来源:3-8 编程练习
_麦当
2019-10-08 12:18:23
<!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">
// 补充代码
var input=document.getElementsByTagName("input")[0];
input.onfocus=function(){
if(input.value.length==0){
span.innerHTML="请输入您的姓名";
}
}
var span=document.getElementsByTagName("span")[0];
input.onblur=function(){
if(input.value.length==0){
input.className="red";
span.innerHTML="用户名不能为空";
}else{
span.style.display="none"
input.removeAttribute("class");
}
}
</script>
</body>
</html>1回答
同学你好,
逻辑没有问题,很棒哦!
优化:在聚焦的时候清除之前的边框样式,否则会进行覆盖:

修改:

文字置空即可,不需要隐藏,否则操作多次的时候,后面文字就隐藏不显示了。
自己再测试下,祝学习愉快!
欢迎采纳~
相似问题