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. hibernate事务管理 (jdbc jta)

    hibernate的两种事务管理jdbc 和jta方式.下边说说两者的区别一.说明一下jdbc和jta方式事务管理的区别:JDBC事务由Connnection管理,也就是说,事务管理实际上是在JDBC ...

  2. springboot--数据库操作

    1.注意: 使用get,post提交时,使用form-data; 使用put提交方式,使用x-www-form-url-encoded,这是http的一种格式;

  3. window.frames在不同浏览器中的用法

    document.frames 等同于 window.frames,用来取得当前页面内 window 对象的集合. 不支持Firefox,其他浏览器(chrome.opera.IE.360)均支持. ...

  4. Linux服务器性能评估与优化(一)

    网络内容总结(感谢原创) 1.前言简介 一.影响Linux服务器性能的因素   1. 操作系统级         性能调优是找出系统瓶颈并消除这些瓶颈的过程. 很多系统管理员认为性能调优仅仅是调整一下 ...

  5. android自定义控件——以滑动开关为例

    0.引言 (1)Android从4.0开始提供了switch的滑动开关效果组件,但是之前版本却没有 (2)很多时候我们写程序,都希望把有用的通用的通用的东西封装起来,以便以后重用. 本文根据组件开发思 ...

  6. esri GDB API

    抽空研究了下API,目前1.4版本,还不错. 记录下 DatasetRelationshipTypes类型 - DatasetRelationshipTypes {string[18]} string ...

  7. java面试题全集（上）--java基础

    本文转载自:https://blog.csdn.net/jackfrued/article/details/44921941 1.面向对象的特征有哪些方面? 答:面向对象的特征主要有以下几个方面: - ...

  8. IOS开发入门实例

    关于如何创建第一个 iOS 应用 本篇“第一个 iOS 应用”教程将向你介绍 iOS 应用开发中的“三个T”: Tools(工具)如何利用 Xcode 创建和管理工程. Technologies(技术 ...

  9. UIRecorder安装与使用

    继vue单元测试,将进行vue的e2e测试学习. 学习点: 安装uirecorder 用工具(UI Recorder)录制测试脚本 测试脚本的回放 本文意在安装UI Recorder,并且利用该工具进 ...

  10. Orchard Core 文档翻译 （五）自动路由 Autoroute (OrchardCore.Autoroute)

    Autoroute (OrchardCore.Autoroute) 此模块允许您为内容项指定自定义URL(永久链接 permalink). Autoroute Part 将此部分附加到内容类型以指定内 ...