老师帮忙看下可以吗

来源:3-8 编程练习

Clover丶三叶草

2019-08-02 11:27:19

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>onblur和onfocus</title>

    <style type="text/css">

        .red{

     border:1px solid red;

     }

     span{

         display:none;

     }

     .borderred{

         border-color:red;

     }

    </style>

</head>

<body>

姓名:<input type="text"> <span>请输入您的姓名</span>

<script type="text/javascript">

// 补充代码

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

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


input.onfocus=function(){

    if(input.value==""){

        span.style.display="block";

    }

}

input.onblur=function(){

    if(input.value==""){

        span.innerHTML="用户名不能为空";

        input.className="borderred";

    }else{

        span.innerHTML="";

        input.className="";

    }

}

</script>

</body>

</html>


写回答

1回答

好帮手慕码

2019-08-02

同学你好!

当聚焦没有输入内容,失去焦点后再次聚焦, 输入框红色和蓝色重合了:

http://img.mukewang.com/climg/5d43d7d40001a59c02660050.jpg

可以在聚焦的时候先清除类名:

http://img.mukewang.com/climg/5d43d7ee0001487c04540169.jpg

如果帮助到了你 欢迎采纳 祝学习愉快~

0

0 学习 · 40143 问题

查看课程