admin 管理员组文章数量: 1184232
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=".11.0/jquery.min.js"></script>
3 <script src=".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=".1.2/style/weui.min.css">
9 <link rel="stylesheet" href=".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=".11.0/jquery.min.js"></script>
21 <script src=".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
转载于:.html
本文标签： JavaScript监控输入框字数变化，超出限制则禁止输入
版权声明：本文标题：JavaScript监控输入框字数变化，超出限制则禁止输入 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://www.roclinux.cn/p/1698023047a283098.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论