老师请看看,输入内容之后仍旧会弹出“用户名不能为空”

来源:4-11 编程练习

我不是胖球球

2021-06-05 19:15:06

<!DOCTYPE html>

<html lang="en">


<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style type="text/css">

        .red {

            border1px solid red;

        }

    </style>

</head>


<body>

    姓名:<input type="text"> <span></span>

    <script type="text/javascript">

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

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

        var len = oInput.value.length;

        oInput.onfocus = function () {

            if (len == 0) {

                oSpan.innerHTML = '请输入您的姓名'

            }

        }

        oInput.onblur = function () {

            if (len == 0) {

                oSpan.innerHTML = '用户名不能为空';

                oInput.className = 'red'

            } else {

                oSpan.innerHTML = '';

                oInput.className = '';

            }

        }

    </script>

</body>


</html>


写回答

1回答

好帮手慕星星

2021-06-06

同学你好,这是因为输入框长度提前获取了,默认为0,所以即使改变输入框内容,也改变不了长度。

我们需要在聚焦或者失焦的时候获取,如下:

http://img.mukewang.com/climg/60bc2c5f09fc0afd05490564.jpg

自己再测试下,祝学习愉快!

0

0 学习 · 15276 问题

查看课程