3-6问题

3-6问题

<!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 inp=document.getElementsByTagName("input")[0];
   var sp=document.getElementsByTagName("span")[0]
   inp.onfocus=function(){
       if(inp.value==""){
         inp.className="";
         sp.innerHTML="请输入您的姓名";
       }
   }
   inp.onblur=function(){
       if(inp.value==""){
           sp.innerHTML="用户名不能为空";
           inp.className="red";
       }else{
           sp.style.display="none";
       }
   }
}
// 补充代码
</script>
</body>
</html>

老师,请帮忙看下。在做的时候发现一个问题,当我输入正确之后再删除掉文字再获取焦点,这个时候就没有问题提醒了,请指正下,谢谢

正在回答

登陆购买课程后可参与讨论,去登陆

2回答

失去焦点的时候,如果内容为空,要让提示显示

http://img1.sycdn.imooc.com//climg/5a1cca3a0001eabf05990270.jpg

  • Durians 提问者 #1
    非常感谢!
    2017-11-29 20:59:43
  • Durians 提问者 #2
    老师,我这里没有隐藏,为什么要重新设置显示出来呢
    2017-11-29 21:02:55
怎么都被占用了呢 2017-11-30 09:31:59

如果文本框内有值的话,失去焦点,提示就隐藏了。这个时候,如果把内容清空,再失去焦点的话,它就不会提示了,不过按照我们的预期,它是要有一个提示效果的,所以,我们要让它先显示

问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师