JS textarea文本框输入字数限制以及字数显示

最新推荐文章于 2025-06-17 13:48:38 发布

Augenstern、

最新推荐文章于 2025-06-17 13:48:38 发布

阅读量7.6k

点赞数 5

CC 4.0 BY-SA版权

分类专栏： JS 文章标签： javascript 前端 html5

本文链接：https://blog.csdn.net/m0_46364033/article/details/123554618

JS 专栏收录该内容

10 篇文章

订阅专栏

这篇博客介绍了如何使用HTML和JavaScript实现一个textarea输入框，限制其最多输入100个字符，并显示5行内容。通过监听textarea的input事件，实时更新剩余字数显示，帮助用户更好地控制输入内容的长度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

大致实现的效果如下：（其中样式自行调整）
在这里插入图片描述
html代码：

// 设置字数限制为100，显示行数为5行
<div>
	<textarea name="" id="licenseText" rows="5" maxlength="100" placeholder="选填"></textarea>
	<div><span id="textCount">0</span>/100</div>
</div>

JS代码：

var el = document.getElementById('licenseText');
el.addEventListener('input',function () {
   var len =  txtCount(this); //   调用函数 
    document.getElementById('textCount').innerHTML = len;
});

//函数 - 获取文本内容和长度
function txtCount(el) {
    var val = el.value; 
    var eLen = val.length; 
    return eLen;
}