提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
文章目录
限制文本框的字数长度以及设置右下角动态的字数显示使用步骤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提供了一些能使我们快速便捷地获得鼠标响应的事件。