已超出字数这个位置不会复位

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>输入文本</title>
    </head>
    <body>
        <p>字数限制在30字内，<span>您还可以输入<b>30</b> 字</span></p>
        <textarea cols="50"  rows="7"  id="text"></textarea>
        <script type="text/javascript">
            //补充代码
            //取到文本域
            var te = document.getElementById('text');
            //取到字数变化的位置
            var word = document.getElementsByTagName('b')[0];
            //取到显示变化位置
            var sp = document.getElementsByTagName('span')[0];
            //定义变量为30
            var count = 30;

            //监听事件
            te.onkeyup = function(){
            //定义输入文本长度
                var len = te.value.length;
                word.innerText = count - len;
                if(count - len < 0){
                    var number_1 = len - count;
                    sp.innerText = '已经超出'+number_1 +'字';
                }
            }
        </script>
    </body>
</html>

请问下，即使删除了多余的字数也只会显示已超出字数，需要怎么调整？

慕尼黑9422427 2021-06-08

源自：DOM 4-10 编程练习

收起

2回答

好帮手慕言 2021-06-09 09:58:34

同学你好，有没有输入空格呀？输入空格的话也是会计算的。鼠标放在输入框最左侧，按住鼠标左键往后滑动，如果和下方一样有蓝色的，那就是输入了空格。

如果没有输入空格的话，建议把代码粘贴上来，并详细说明下是如何测试的。

另外：修改之后，如果超出字数之后，提示文字如下：

如果不想有上图红线中的字，可以修改如下：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>输入文本</title>
</head>

<body>
    <p>字数限制在30字内，<span>您还可以输入<b>30</b> 字</span></p>
    <textarea cols="50" rows="7" id="text"></textarea>
    <script type="text/javascript">
        //补充代码
        //取到文本域
        var te = document.getElementById('text');
        //取到字数变化的位置
        var word = document.getElementsByTagName('b')[0];
        //取到显示变化位置
        var sp = document.getElementsByTagName('span')[0];
        //定义变量为30
        var count = 30;

        //监听事件
        te.onkeyup = function () {
            //定义输入文本长度
            var len = te.value.length;
            if (count - len < 0) {
                sp.innerHTML = '已经超出<b>' + (len - count) + '</b> 字';
            } else {
                console.log(count - len)
                sp.innerHTML = '您还可以输入<b>' + (count - len) + '</b> 字';
            }

        }
    </script>
</body>

</html>