3-4编程练习

<!DOCTYPE html>

<html>

<head>

<title>onblur和onfocus</title>

.red{

border:1px solid red;

}

span{display: none;}

</style>

</head>

<body>

姓名：<input type="text"> <span>请输入你的姓名</span>

var inputs=document.getElementsByTagName('input')[0];

var spans=document.getElementsByTagName('span')[0];

inputs.onfocus=function(){

inputsval=this.value;

if(inputsval.length==0){

spans.style.display='block'

inputs.style.color="grey"

spans.innerHTML='请输入你的姓名'

}else if(inputsval.length!=0){

spans.innerHTML=''

inputs.style.color="grey"

}

inputs.onblur=function(){

inputsval=this.value;

if(inputsval.length==0){

spans.innerHTML='用户名不能为空'

inputs.className='red'

}

</script>

</body>

</html>

判断输入框内有文字然后不显示用户不能为空和输入框颜色这一步怎么写，我的翻了什么错误

夜景阑珊 2017-09-26

源自：JavaScript DOM事件 3-5 事件类型（onfocus和onblur）

收起

2回答

小丸子爱吃菜 2017-09-26 12:11:20

<script type="text/javascript">
       var inputs=document.getElementsByTagName('input')[0];
        var spans=document.getElementsByTagName('span')[0];
       inputs.onfocus=function(){
           inputsval=this.value;
        if(inputsval.length==0){
         spans.style.display='block'
         inputs.style.borderColor="green"
         spans.innerHTML='请输入你的姓名'
        }else if(inputsval.length!=0){
             spans.innerHTML=''
             inputs.style.color="blue"
        }
       }
       inputs.onblur=function(){
           inputsval=this.value;
          if(inputsval.length==0){
            spans.innerHTML='用户名不能为空'
            inputs.style.borderColor='red'
          }
       }
      
      
    </script>
    可以参考上面的代码。style添加的是元素的行内样式，优先级会比较高，添加样式最好按照一致的属性去写！

收起回答

提问者夜景阑珊 #1

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>onblur和onfocus</title> <style type="text/css"> .red{ border:1px solid red; } span{display: none;} </style> </head> <body> 姓名：<input type="text"> <span>请输入你的姓名</span> <script type="text/javascript"> var inputs=document.getElementsByTagName('input')[0]; var spans=document.getElementsByTagName('span')[0]; inputs.onfocus=function(){ inputsval=this.value; if(inputsval.length==0){ spans.style.display='block' // inputs.style.borderColor="gray" spans.innerHTML='请输入你的姓名' }else if(inputsval.length!=0){ spans.innerHTML='' inputs.style.border="1px solie gray" } } inputs.onblur=function(){ inputsval=this.value; if(inputsval.length==0){ spans.innerHTML='用户名不能为空' inputs.style.borderColor='red' }else if(inputsval.length!=0){ spans.innerHTML='' inputs.style.border="1px solie gray" } } </script> </body> </html> 感谢，想明白了最后一步鼠标点到外面事件触发，我给放到点击输入框里面去来难怪不行，

2017-09-26 12:34:45

小丸子爱吃菜 2017-09-26 11:25:22

测试了你的代码，可以实现啊，你使用的事件是onfocus和onblur，需要光标在输入框内和光标点在输入框外，才会执行里面的语句。

你再试试！

祝学习愉快！

收起回答

提问者夜景阑珊 #1

我先点击输入框，触发焦点弹出输入用户名，然后鼠标移到外面触发用户名不能为空输入框颜色变成红色，我在次点击输入框触发输入用户名事件，但是输入框颜色没有变成灰色，还是红色，输入框输入文字后点击外面在点击回输入框才能把触发的文字事件取消掉，看作业是输入文字点击输入框外面，文字都不显示，老师麻烦在给我讲解一下，谢谢

2017-09-26 11:52:05