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

不废话，给你看看效果：

1.无输入状态：

2.输入三个字符：

3.超出5个后报错：

现在粘出代码，首先是html代码：

  1.     <body>
  2.         <div class="weui-cells__title" style="font: '微软雅黑';font-size: 17px;color: black;" align="center">大文本框：</div>
  3.         <div class="weui-cell">
  4.             <textarea class="weui-textarea" id="ActivityParticipationProcess" placeholder="在此处输入内容" rows="5" oninput="OnInput (event,5,'count')" onpropertychange="OnPropChanged (event,5,'count')"></textarea>
  5.             <div class='weui-textarea-counter'><span id="count"></span>/5</div>
  6.         </div>
  7.     </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

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. 03.if 和 switch结合练习

    namespace _04.练习01 { class Program { static void Main(string[] args) { //请用户输入年份,再输入月份,输出该月有多少天 Cons ...

  2. Git for Android Studio 学习笔记

    http://learngitbranching.js.org/ 一个特别好的git学习教程 创建一个project,然后导入github

  3. fegin client使用http url合约时报： [Request processing failed; nested exception is feign.FeignException: status 400 reading

    首先看feign client代码: @FeignClient(name = "SPRING-CLOUD-WEB-PROVIDER-GROUP2", url = "htt ...

  4. node的版本控制之nvm的安装与使用

    NVM的安装 windows下的安装: windows下的离线安装: nvm 的windows下载地址:https://github.com/coreybutler/nvm-windows/relea ...

  5. win10下clodeblocks编译C语言乱码

    打开settings->compile,在other compiler options添加下面两行代码: -fexec-charset=GBK-finput-charset=UTF-8

  6. Android 环信(Android)设置头像和昵称的方法

    最近,经常有朋友问到,如何集成环信头像,怎么才能快速显示头像,因时间紧急,很多朋友都没有时间慢慢的研究代码,这里大家稍微花10分钟看一下文章,看完后再花5分钟改一下代码,即可达到你们所要的效果. 当然 ...

  7. js：JSON对象与JSON字符串转换

    JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,采用完全独立于语言的文本格式,是理想的数据交换格式. 同时,JSON是 JavaScript 原生格式,这 ...

  8. AWS的登录认证。。。

    Hello, I’m sorry for any concern regarding the $1.00 Authorization that you see associated with your ...

  9. Linux文件压缩和解压缩命令

    Linux文件压缩和解压缩命令: tar 命令(打包并压缩的话,原文件也会默认存在) -c 建立打包档案 -x 解包 -t 查看包里的类容 -r 向包里追加文件 -v 显示打包过程 -f 文件 比如: ...

  10. DeepQA websocket 并发测试

    var client = new Array(); var W3CWebSocket = new Array(); var concurrent = 2; for (var i = 0; i < ...