JavaScript监控输入框字数变化，超出限制则禁止输入
JavaScript监控输入框字数变化，超出则禁止输入
不废话，给你看看效果：
1.无输入状态：
2.输入三个字符：
3.超出5个后报错：
现在粘出代码，首先是html代码：
<body> <div class="weui-cells__title" style="font: '微软雅黑';font-size: 17px;color: black;" align="center">大文本框：</div> <div class="weui-cell"> <textarea class="weui-textarea" id="ActivityParticipationProcess" placeholder="在此处输入内容" rows="5" oninput="OnInput (event,5,'count')" onpropertychange="OnPropChanged (event,5,'count')"></textarea> <div class='weui-textarea-counter'><span id="count"></span>/5</div> </div> </body>
上述html代码中，关键在于OnInput方法和OnPropChanged方法，方法内参数event为主要监听参数，2000为字数限制，"count"为下面那个字数统计的id，传入这三个参数可以使方法被多个页面调用，实现代码复用，减少冗余代码。
现在贴出js部分代码，我是写在一个单独的js文件里面的，此处放在同一页面：
1 <!-- body 最后 --> 2 <script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script> 3 <script src="https://cdn.bootcss.com/jquery-weui/1.2.0/js/jquery-weui.min.js"></script> 4 <script> 5 $("#count").html("0");//初始化字数计数器 6 7 /* 此方法兼容大部分浏览器，如：Firefox, Google Chrome, Opera, Safari, Internet Explorer from version 9 8 监听输入框字数变化*/ 9 function OnInput(event, length, id) { 10 11 if(event.srcElement.value.length <= length) { 12 $("#" + id).html(event.srcElement.value.length); 13 } else { 14 $.toptip("内容过长，最多" + length + "字", 'warning'); 15 /*获取输入框id值*/ 16 var id2 = event.srcElement.id; 17 /*超出规定长度后禁止继续输入*/ 18 var value = event.srcElement.value.substring(0, length); 19 $("#" + id2).val(value); 20 } 21 22 } 23 // 此方法仅适用于IE浏览器 24 function OnPropChanged(event, length, id) { 25 26 if(event.srcElement.value.length <= length) { 27 $("#" + id).html(event.srcElement.value.length); 28 } else { 29 $.toptip("内容过长，最多" + length + "字", 'warning'); 30 /*获取输入框id值*/ 31 var id2 = event.srcElement.id; 32 /*超出规定长度后禁止继续输入*/ 33 var value = event.srcElement.value.substring(0, length); 34 $("#" + id2).val(value); 35 } 36 37 } 38 </script>
现在放出完整页面代码：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>监听输入框字数变化</title> 6 <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0"> 7 <!-- head 中 --> 8 <link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.2/style/weui.min.css"> 9 <link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/1.2.0/css/jquery-weui.min.css"> 10 </head> 11 12 <body> 13 <div class="weui-cells__title" style="font: '微软雅黑';font-size: 17px;color: black;" align="center">大文本框：</div> 14 <div class="weui-cell"> 15 <textarea class="weui-textarea" id="ActivityParticipationProcess" placeholder="在此处输入内容" rows="5" oninput="OnInput (event,5,'count')" onpropertychange="OnPropChanged (event,5,'count')"></textarea> 16 <div class='weui-textarea-counter'><span id="count"></span>/5</div> 17 </div> 18 </body> 19 <!-- body 最后 --> 20 <script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script> 21 <script src="https://cdn.bootcss.com/jquery-weui/1.2.0/js/jquery-weui.min.js"></script> 22 <script> 23 $("#count").html("0");//初始化字数计数器 24 25 /* 此方法兼容大部分浏览器，如：Firefox, Google Chrome, Opera, Safari, Internet Explorer from version 9 26 监听输入框字数变化*/ 27 function OnInput(event, length, id) { 28 29 if(event.srcElement.value.length <= length) { 30 $("#" + id).html(event.srcElement.value.length); 31 } else { 32 $.toptip("内容过长，最多" + length + "字", 'warning'); 33 /*获取输入框id值*/ 34 var id2 = event.srcElement.id; 35 /*超出规定长度后禁止继续输入*/ 36 var value = event.srcElement.value.substring(0, length); 37 $("#" + id2).val(value); 38 } 39 40 } 41 // 此方法仅适用于IE浏览器 42 function OnPropChanged(event, length, id) { 43 44 if(event.srcElement.value.length <= length) { 45 $("#" + id).html(event.srcElement.value.length); 46 } else { 47 $.toptip("内容过长，最多" + length + "字", 'warning'); 48 /*获取输入框id值*/ 49 var id2 = event.srcElement.id; 50 /*超出规定长度后禁止继续输入*/ 51 var value = event.srcElement.value.substring(0, length); 52 $("#" + id2).val(value); 53 } 54 55 } 56 </script> 57 58 </html>
第一次写，写的不好或者排版不好看请见谅，有疑问或者建议意见都欢迎留言或者来信：CodeKjm@163.com
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 单元测试从入门到精通
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 上周热点回顾（3.3-3.9）
· winform 绘制太阳，地球，月球 运作规律