限制文本框的字数长度以及设置右下角动态的字数显示

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

• 限制文本框的字数长度以及设置右下角动态的字数显示
• 使用步骤
  • 1. 获取事件
  • 2. 事件监听
  • 3.不断得到文本域里面的长度

---

前言

通过事件监听不断获得文本框中的数字长度，从而动态显示字数

---

提示：以下是本篇文章正文内容，下面案例可供参考

使用步骤

1.HTML代码

代码如下（示例）：

<div class="w">
    <div class="controls">
      <img src="images/tip.png" alt=""><br>
      <textarea placeholder="说点什么吧..." 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>

2.JavaScript代码

代码如下（示例）：

<script>
          // 1. 获取事件 
          let area = document.querySelector('#area');
          let useCount = document.querySelector('.useCount');
          // 2. 事件监听
          area.addEventListener('input', () => {
            //console.log(111);
            // 不断得到文本域里面的长度
            //console.log(area.value.length);

              useCount.innerHTML = area.value.length;  
          })

  </script>

该处使用的是input用户输入事件响应，。

---

总结

例如：以上就是今天要讲的内容，本文仅仅简单介绍了addEventListener的使用，而addEventListener提供了一些能使我们快速便捷地获得鼠标响应的事件。