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文件里面的，此处放在同一页面：

 <!-- body 最后 -->

     <script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>

     <script src="https://cdn.bootcss.com/jquery-weui/1.2.0/js/jquery-weui.min.js"></script>

     <script>

         $("#count").html("0");//初始化字数计数器

     /* 此方法兼容大部分浏览器，如：Firefox, Google Chrome, Opera, Safari, Internet Explorer from version 9

         监听输入框字数变化*/

         function OnInput(event, length, id) {

             if(event.srcElement.value.length <= length) {

                 $("#" + id).html(event.srcElement.value.length);

             } else {

                 $.toptip("内容过长，最多" + length + "字", 'warning');

                 /*获取输入框id值*/

                 var id2 = event.srcElement.id;

                 /*超出规定长度后禁止继续输入*/

                 var value = event.srcElement.value.substring(0, length);

                 $("#" + id2).val(value);

             }

         }

         // 此方法仅适用于IE浏览器

         function OnPropChanged(event, length, id) {

             if(event.srcElement.value.length <= length) {

                 $("#" + id).html(event.srcElement.value.length);

             } else {

                 $.toptip("内容过长，最多" + length + "字", 'warning');

                 /*获取输入框id值*/

                 var id2 = event.srcElement.id;

                 /*超出规定长度后禁止继续输入*/

                 var value = event.srcElement.value.substring(0, length);

                 $("#" + id2).val(value);

             }

         }

     </script>

现在放出完整页面代码：

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>监听输入框字数变化</title>

         <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">

         <!-- head 中 -->

         <link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.2/style/weui.min.css">

         <link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/1.2.0/css/jquery-weui.min.css">

     </head>

     <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>

     <!-- body 最后 -->

     <script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>

     <script src="https://cdn.bootcss.com/jquery-weui/1.2.0/js/jquery-weui.min.js"></script>

     <script>

         $("#count").html("0");//初始化字数计数器

     /* 此方法兼容大部分浏览器，如：Firefox, Google Chrome, Opera, Safari, Internet Explorer from version 9

         监听输入框字数变化*/

         function OnInput(event, length, id) {

             if(event.srcElement.value.length <= length) {

                 $("#" + id).html(event.srcElement.value.length);

             } else {

                 $.toptip("内容过长，最多" + length + "字", 'warning');

                 /*获取输入框id值*/

                 var id2 = event.srcElement.id;

                 /*超出规定长度后禁止继续输入*/

                 var value = event.srcElement.value.substring(0, length);

                 $("#" + id2).val(value);

             }

         }

         // 此方法仅适用于IE浏览器

         function OnPropChanged(event, length, id) {

             if(event.srcElement.value.length <= length) {

                 $("#" + id).html(event.srcElement.value.length);

             } else {

                 $.toptip("内容过长，最多" + length + "字", 'warning');

                 /*获取输入框id值*/

                 var id2 = event.srcElement.id;

                 /*超出规定长度后禁止继续输入*/

                 var value = event.srcElement.value.substring(0, length);

                 $("#" + id2).val(value);

             }

         }

     </script>

 </html>

第一次写，写的不好或者排版不好看请见谅，有疑问或者建议意见都欢迎留言或者来信：CodeKjm@163.com

JavaScript监控输入框字数变化，超出限制则禁止输入的更多相关文章

  1. JavaScript 实现textarea限制输入字数， 输入框字数实时统计更新，输入框实时字数计算移动端bug解决

    textarea称文本域,又称文本区,即有滚动条的多行文本输入控件,在网页的提交表单中经常用到.与单行文本框text控件不同,它不能通过maxlength属性来限制字数,为此必须寻求其他方法来加以限制 ...

  2. HTML5 oninput实时监听输入框值变化的完美方案

    在网页开发中经常会碰到需要动态监听输入框值变化的情况,如果使用 onkeydown.onkeypress.onkeyup 这个几个键盘事件来监测的话,监听不了右键的复制.剪贴和粘贴这些操作,处理组合快 ...

  3. 【转载】实时监听输入框值变化的完美方案：oninput & onpropertychange

    oninput 是 HTML5 的标准事件,对于检测 textarea, input:text, input:password 和 input:search 这几个元素通过用户界面发生的内容变化非常有 ...

  4. js/jquery 实时监听输入框值变化的完美方案：oninput & onpropertychange

    (1)     先说jquery, 使用 jQuery 库的话,只需要同时绑定 oninput 和 onpropertychange 两个事件就可以了,示例代码: $('#username').bin ...

  5. angularJS使用$watch监控数据模型的变化

    使用$watch监控数据模型的变化 在scope 内置的全部函数中,用得最多的可能就是$watch 函数了.当你的数据模型中某一部分发生变化时,$watch 函数能够向你发出通知.你能够监控单个对象的 ...

  6. .NET Core的文件系统[1]：读取并监控文件的变化

    ASP.NET Core 具有很多针对文件读取的应用.比如我们倾向于采用JSON文件来定义配置,所以应用就会涉及针对配置文件读取.如果用户发送一个针对物理文件的HTTP请求,应用会根据指定的路径读取目 ...

  7. 实时监听输入框值变化：oninput & onpropertychange

    结合 HTML5 标准事件 oninput 和 IE 专属事件 onpropertychange 事件来监听输入框值变化. oninput 是 HTML5 的标准事件,对于检测 textarea, i ...

  8. 实时监听输入框值变化的完美方案：oninput & onpropertychange

    实时监听输入框值变化的完美方案:oninput & onpropertychange: 网址:http://www.cnblogs.com/lhb25/archive/2012/11/30/o ...

  9. js监听input等表单输入框的变化事件oninput

    js监听input等表单输入框的变化事件oninput,手机页面开发中使用到文本框textarea输入字符监听文本框变化计算还可以输入多少字符,如果使用onkeyup的话是无法监听到输入法输入的文本变 ...

随机推荐

  1. 接收sql语句的返回值

    首先,简要介绍一下我们需要什么? 我们想在sql中用 try...catch,如果成功,就返回我们查询的值,如果失败就返回-1 所以有了以下sql语句(写在后台的) string myInsert = ...

  2. Spring3.2下使用JavaMailSenderImpl类发送邮件

    1.JavaMailSenderImpl类 Spring的邮件发送的核心是MailSender接口,在Spring3.0中提供了一个实现类JavaMailSenderImpl,这个类是发送邮件的核心类 ...

  3. JQuery.iviewer

    from: http://test.dpetroff.ru/jquery.iviewer/test/# jquery.iviewer.js: /* * iviewer Widget for jQuer ...

  4. 00字体图标iconfont的制作与使用--阿里矢量图库

    一.iconfont的使用范围 在工作当中,经常会用到嵌在元素里的小图标 在这种情况下,如果使用<img>标签或者用作背景图片,也能实现这种效果.但是如果这么做的话,就必须把图片一个个切下 ...

  5. 编写可维护的 Gruntfile.js

    load-grunt-tasks 插件 首先介绍下 load-grunt-tasks 这个插件. 我们一般都会把所有用到的插件以及插件的配置写到 Gruntfile.js 里面,对于小项目来说这个文件 ...

  6. pId的数据结构转children 数据结构(JS)；

    在工作中经常遇到需要把带有pId的的list数据转换为children格式的树形结构,一直都没有找到太好的工具函数.偶然间看到了这个函数,研究了下,感觉这个函数很强大,所以记录下来,作为备用,同时也贴 ...

  7. wxpython,wx.EVT_ENTER_WINDOW

    这个例子是鼠标移入,button的label显示“Over Me”,但是我运行没有显示求怎么回事

  8. Python中深浅拷贝 垃圾回收与 super继承(六)

    1 python拷贝 深拷贝,浅拷贝 与引用三者的区别 import copy a = [1, 2, 3, 4, ['a', 'b']] #原始对象 b = a #赋值,传对象的引用 c = copy ...

  9. Java反射创建带构造参数的类 并执行方法

    部分代码 public void go(ServletRequest request,ServletResponse response){ String methodName = "inde ...

  10. php调用含有命名空间的类

    现有a.php 和 b.php在同一个目录下 a.php中 namespace myspace; class A{ __construct(){} .... } b.php中调用类A require_ ...