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

转载于:https://www.cnblogs.com/CodeKjm/p/8000863.html

JavaScript监控输入框字数变化，超出限制则禁止输入相关推荐

html 实时计算字数,JavaScript 实现textarea限制输入字数，输入框字数实时统计更新，输入框实时字数计算移动端bug解决...
textarea称文本域,又称文本区,即有滚动条的多行文本输入控件,在网页的提交表单中经常用到.与单行文本框text控件不同,它不能通过maxlength属性来限制字数,为此必须寻求其他方法来加以限制 ...
JavaScript 实现textarea限制输入字数，输入框字数实时统计更新，输入框实时字数计算移动端bug解决...
textarea称文本域,又称文本区,即有滚动条的多行文本输入控件,在网页的提交表单中经常用到.与单行文本框text控件不同,它不能通过maxlength属性来限制字数,为此必须寻求其他方法来加以限制 ...
实时监听输入框值变化的完美方案：oninput onpropertychange
实时监听输入框值变化的完美方案:oninput & onpropertychange 原文:实时监听输入框值变化的完美方案:oninput & onpropertychange 在 W ...
java监听mysql_java实时监控mysql数据库变化
对于二次开发来说,很大一部分就找找文件和找数据库的变化情况对于数据库变化.还没有发现比较好用的监控数据库变化监控软件. 今天,我就给大家介绍一个如何使用mysql自带的功能监控数据库变化 1.打开数 ...
Linux定期监视某文件变化,监控Linux文件变化，防止服务器被黑
运维服务器比较头疼的一个问题是系统被黑,沦为肉鸡或者矿机.除了加强安全基线配置,加强网络和端口加固,系统和应用bug修复,上IDS/IPS(入侵检测/防御系统)之外,另一个方面就是系统监控,一个完善准 ...
【视频】vue $watch监控数据的变化
P14vue $watch监控数据的变化 https://www.bilibili.com/video/av91679349?p=14
jquery实时监听输入框值变化
在做web开发时候很多时候都需要即时监听输入框值的变化,以便作出即时动作去引导浏览者增强网站的用户体验感.而采用onchange时间又往往是在输入框失去焦点(onblur)时候触发,有时候并不能满足条 ...
python监控网页内容变化_使用Python监控文件内容变化代码实例
利用seek监控文件内容,并打印出变化内容: #/usr/bin/env python #-*- coding=utf-8 -*- pos = 0 while True: con = open(&qu ...
delphi 监控文件变化_监控Linux文件变化，防止系统被黑
运维服务器比较头疼的一个问题是系统被黑,沦为肉鸡或者矿机.除了加强安全基线配置,加强网络和端口加固,系统和应用bug修复,上IDS/IPS(入侵检测/防御系统)之外,另一个方面就是系统监控,一个完善准 ...

JavaScript监控输入框字数变化，超出限制则禁止输入

JavaScript监控输入框字数变化，超出则禁止输入

JavaScript监控输入框字数变化，超出限制则禁止输入相关推荐

最新文章

热门文章