统计文本输入域字数(附实现思路和源码)

194 阅读1分钟

实现思路:这个涉及到事件知识点。事件三要素:事件源(什么发生变化)、事件类型(怎么发生)、事件处理函数(发生什么事)。统计文本域字数:随着用户在文本域的输入,字符串长度不断变大,修改统计数量标签的文本。事件源有两个,第一个是文本域(用户要输入字符串),第二个是修改字符串的标签文本内容(因为数量在发生变化),事件类型是键盘输入(oninput),事件处理函数是将字符串长度赋值给标签,标签的文本内容发生变化。

<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Document</title>
  <style>
    .userCount {
      color: red;
    }
  </style>
</head>

<body>
  <div class="controls">
    <textarea placeholder="说点什么吧..." id="area" cols="30" rows="10" maxlength="200"></textarea>
    <div>
      <span class="userCount">0</span>
      <span>/</span>
      <span>200</span>
    </div>
  </div>
  <script>
    //事件源,获取文本域元素
    let textarea = document.querySelector('textarea')
    //事件源,获取统计字数标签元素
    let userCount = document.querySelector('.userCount')
    //事件类型:oninput(键盘输入)
    textarea.oninput = function () {
      //表单的文字内容利用value,length记录长度,将长度赋值给记录数量的元素,修改它的文本内容
      userCount.innerHTML = textarea.value.length
    }
  </script>
</body>

</html>