🖼️ Lyin's Room

Search

Search IconIcon to open search

文本域字数统计

Last updated Unknown

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<body>
    <div class="w">
        <div class="controls">
            <textarea placeholder="type..." id="area" cols="30" rows="10" maxlength="200"></textarea>
            <div>
                <span class="useCount">0</span>
                <span>/</span>
                <span>200</span>
                <button id="send">发布</button>
            </div>

        </div>
        <div class="contentList">
            <ul>

            </ul>
        </div>
    </div>
    <script>
        let area = document.querySelector('#area') // id为area的文本域
        let useCount = document.querySelector('.useCount')
            // 绑定事件 input 输入
        area.addEventListener('input', function() {
            //得到文本域的字符长度
            useCount.innerHTML = area.value.length
        })
    </script>
</body>