请问这样可以吗
来源: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回答
同学你好,
逻辑没有问题,很棒哦!
优化:在聚焦的时候清除之前的边框样式,否则会进行覆盖:
修改:
文字置空即可,不需要隐藏,否则操作多次的时候,后面文字就隐藏不显示了。
自己再测试下,祝学习愉快!
欢迎采纳~
相似问题