0
点赞
收藏
分享

微信扫一扫

计算 textarea 的字符数

假设我们有一个 ​​textarea​​​ 和一个 ​​div​​ 元素来显示用户输入了多少字符:

<div>
<textarea rows="5" maxlength="200" id="message"></textarea>
<div id="counter">0</div>
</div>

这里我们使用 ​​maxlength​​​ 属性设置用户可以在 ​​textarea​​ 中放置的最大字符数。

接下来,我们需要处理 ​​textarea​​ 元素值改变时触发的事件:

document.addEventListener('DOMContentLoaded', function () {
const messageEle = document.getElementById('message')
const counterEle = document.getElementById('counter')
// 获取 `maxlength` 属性
const maxLength = messageEle.getAttribute('maxlength')

counterEle.innerHTML = `0/${maxLength}`

messageEle.addEventListener('input', function (e) {
const target = e.target
// 计算当前字符数
const currentLength = target.value.length
counterEle.innerHTML = `${currentLength}/${maxLength}`
})
})

注意

常见的错误是捕获 ​​keyup​​ 事件。它在某些情况下不起作用,例如:

  • 用户将文本拖动到文本区域
  • 用户在文本区域中单击鼠标右键,然后从关联菜单中选择“粘贴”

​​查看效果​​

举报

相关推荐

0 条评论