dom的点击事件操作文本域一个实例![image.png](https://p9-juejin.byteimg.com/

<!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>
  </body>
  <script>
    // 当textarea里面有输入的时候，就会触发一个事件
    var textarea = document.querySelector("textarea");
    var b = document.querySelector("b");
    var span = document.querySelector("span");

    textarea.oninput = function () {
      var count = 30;
      //   和input框输入会有一个inputValue一样，textarea输入也会有一个value
      count -= this.value.length;
      if (count > 0) {
        spanInnerHTML = "您还以输入</b>" + count + "</b>字";
      } else {
        spanInnerHTML = "您已经超出" + Math.abs(count) + "字";
      }
      span.innerHTML = spanInnerHTML;
    };
  </script>
</html>