该怎么写呀？

神知 2021-03-11

源自：DOM 4-10 编程练习

收起

2回答

好帮手慕言 2021-04-24 18:34:44

同学你好，解答如下：

1、text是页面中的输入框，text.value可以获取到输入框中的内容，text.value.length是获取输入框中内容的长度（也可以理解为输入框中有多少个字）

2、等号右侧的值会赋值给左侧，变量span是页面上的span标签，innerHTML 属性可以设置开始和结束标签之间的 HTML，所以下方代码，是把等号右侧的内容放到span标签内。

同学可以再理解下，祝学习愉快~

收起回答

好帮手慕言 2021-03-11 14:01:25

同学你好，可以按照下方代码和注释理解：

<!DOCTYPE html>
<html>

<head lang="en">
    <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>
        // 获取元素
        var textInput = document.getElementById('text');
        var span = document.getElementsByTagName('span')[0];
        // 定义变量，存放可以输入多少个字
        var maxNum = 30;
        // 绑定事件
        textInput.onkeyup = function () {
            // 输入框中的内容长度
            var textLen = text.value.length;
            // 如果输入框中的内容长度大于30，页面提示已超出xx字
            if (textLen > 30) {
                // 变量chao是超出的数量
                var chao = textLen - maxNum;
                span.innerHTML = '已超出' + '<b>' + chao + '</b>' + '字';
            } else {
                // 变量allow是还可以输入多少字
                var allow = maxNum - textLen
                span.innerHTML = '您还可以输入' + '<b>' + allow + '</b>' + '字';
            }
        }
    </script>
</body>

</html>