前端实现textarea标签实现右下角展示限制字数及当前字数
时间: 2024-03-08 21:50:29 浏览: 161
好的,这里给你一个简单的示例代码,用于实现textarea标签的限制字数及当前字数的展示:
HTML代码:
```html
<textarea id="textarea" maxlength="100"></textarea>
<div id="word-count"></div>
```
JavaScript代码:
```javascript
const textarea = document.getElementById('textarea');
const wordCount = document.getElementById('word-count');
textarea.addEventListener('input', function() {
const count = textarea.value.length;
wordCount.innerHTML = `当前字数:${count},限制字数:${textarea.maxLength}`;
});
```
在这个示例中,我们给textarea标签设置了一个maxlength属性,表示限制输入的最大字符数为100。然后通过JavaScript监听textarea的input事件,每当输入内容发生变化时,计算当前输入的字符数并更新展示。
阅读全文