JavaScript实现文本框字数实时统计与限制

作者:半夏时间:2026-10-25 08:04:56浏览:529

本文介绍利用JavaScript实现文本框字数实时统计与限制功能。通过监听onkeyup事件获取当前字符长度,结合maxlength属性计算剩余可输入字符数,并使用label控件动态显示。示例包含昵称和评论两个文本框的完整HTML及JS逻辑,适用于需要限制输入长度的表单场景。

JavaScript实现文本框字数实时统计与限制

该功能通过JavaScript实现,核心原理是监听文本框的onkeyup事件以获取当前输入的字符长度,随后用允许的最大字符数减去当前长度,最后通过label控件显示剩余可输入字符数。


实现效果如图所示。


JavaScript实现文本框字数实时统计与限制

具体演示代码如下。


 <html> <head> <title>enter</title>  </head> <body> <center> <div style="text-align:left;"> <h3>昵称:</h3> <input type="text" id="mytext1" maxlength=15 onKeyUp="keypress1()"/> <font color="gray"><label id="name">你还可以输入15个字</label></font>  <h3>评论内容:</h3><br> <textarea id="myarea" style="height:100px;width:200px;overflow-x:hidden;overflow-y:hidden" onKeyUp="keypress2()" onblur="keypress2()"><&#47textarea> <font color="gray"><label id="pinglun">你还可以输入300个字</label></font> <div> </center> </body> </html> 

[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]

作者最新文章