时间戳

首页 > 解决方案 > 如何显示文本框剩余的字符？

javascript - 如何显示文本框剩余的字符？

问题描述

我想在我的代码中实现一个简单的文本框，最多只允许 150 个字符。那部分相对容易。现在，我如何才能显示我的文本框中还剩下多少个字符？

例子：

<textarea  maxlength="150" rows="5" cols="50" wrap="hard">
    In 150 characters or less, tell me something about yourself...
</textarea>

标签： javascript

解决方案

每次用户键入或删除一个字符时，您都可以将input事件附加到您可以执行 (max - current_characters) 操作并在 span 中显示结果：textarea

var max = 150;
var textarea = document.querySelector('textarea');
var info = document.querySelector('#info');

//Init the count for the first time
info.textContent = max - textarea.value.length;

textarea.addEventListener('input', function() {
  info.textContent = max - this.value.length;
})
<textarea maxlength="150" rows="5" cols="50" wrap="hard">

In 150 characters or less, tell me something about yourself...

</textarea>
<br> Remaining <span id="info"></span> characteres

推荐阅读