(function($){
  $.fn.limitTextarea = function(opts){
      var defaults = {
        maxNumber:140,//允许输入的最大字数
        position:'top',//提示文字的位置,top:文本框上方,bottom:文本框下方
        onOk:function(){},//输入后,字数未超出时调用的函数
        onOver:function(){}//输入后,字数超出时调用的函数   
      }
      var option = $.extend(defaults,opts);
      this.each(function(){
          var _this = $(this);
          var info = '<div id="tip">您可以输入<b>' + (option.maxNumber - _this.val().length + 7) + '</b>个字</div>';
          var fn = function(){
            var extraNumber = option.maxNumber - _this.val().length;
            var $info = $('#tip');
            if(extraNumber>=0){
              $info.html('还可以输入<b>'+extraNumber+'</b>个字');    
              option.onOk();
            }
            else{
              $info.html('已经超出<b style="color:red;">'+(-extraNumber)+'</b>个字');
              option.onOver();
            }  
          };
          switch(option.position){
              case 'top' :
                _this.before(info);
              break;
              case 'bottom' :
              default :
                _this.after(info);
          }
          //绑定输入事件监听器
          if(window.addEventListener) { //先执行W3C
            _this.get(0).addEventListener("input", fn, false);
          } else {
            _this.get(0).attachEvent("onpropertychange", fn);
          }
          if(window.VBArray && window.addEventListener) { //IE9
            _this.get(0).attachEvent("onkeydown", function() {
              var key = window.event.keyCode;
              (key == 8 || key == 46) && fn();//处理回退与删除
            });
            _this.get(0).attachEvent("oncut", fn);//处理粘贴
          }          
      });   
  }    
})(jQuery)

调用函数:
                $("#replyTxta").limitTxta({
                    maxNumber: 70,   //最大字数
                    position: 'bottom',   //提示文字的位置,top:文本框上方,bottom:文本框下方
                    onOk: function () {
                        $('#replyTxta').css('background-color', 'white');   //输入后,字数未超出时调用的函数
                        $('#sendBtn').attr('disabled', false);
                    },
                    onOver: function () {
                        $('#replyTxta').css('background-color', 'lightpink');   //输入后,字数超出时调用的函数,这里把文本区域的背景变为粉红色
                        $('#sendBtn').attr('disabled', true);
                    }
                });

转载于:https://www.cnblogs.com/whlhaikuotiankong/p/3401221.html

文本域字数限制统计(不区分中英文 符号)相关推荐

  1. SQLServer中区分中英文标点符号

    SQLServer中区分中英文标点符号 问题出现背景 解决方法 方法一:修改表结构 方法二:自定义排序规则(COLLATE) COLLATE使用简述 问题出现背景 最近在一个SQLServer的存储过 ...

  2. UITextView 字数限制,正在输入字符也算进去,区分中英文字符

    </pre><p></p><p><strong><span style="font-size:32px;"> ...

  3. 计算文本长度,区分中英文字符,中文算两个长度,英文算一个长度

    计算文本长度,区分中英文字符,中文算两个长度,英文算一个长度 public int Text_Length(string Text)       {             int len=0; fo ...

  4. 【微信小程序】文本域输入带最大字数限制(1/100)

    <!-- 输入框 --> <view class="inputBox"><textarea class="textarea2" a ...

  5. vue 统计中英文字符串长度_Ant Design Vue 添加区分中英文的长度校验功能

    原本的maxLength属性是不区分全角/半角字符的,对于一些可中英文混合输入地方而言不太合适.所以想找一个可区分全角/半角字符的校验,而且要保证一定的可重用性. 百度搜了一圈都没找到合适的现成的解决 ...

  6. axure文本框值相加_Axure教程:计数文本域实现

    原标题:Axure教程:计数文本域实现 制定UI规范时,遇到实现"限制字数的文本域"的交互问题,即当用户输入的字数长度超过限制要求,如何只保留规定长度的文本? 效果如下: 我们知道 ...

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

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

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

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

  9. 零基础前端笔记(2)html,表格,列表,标签,文本域,表单域

    XHTML可扩展超文本标记语言(2) (1)创建表格 (2)表格属性 表头单元格标签th 表格标题caption 小说排行榜 (3)合并单元格 (4)划分表格结构 (5)列表标签 无序列表 有序列表 ...

最新文章

  1. visual studio 重命名项目和程序集名称
  2. spring resttemplate 中文参数_SpringBoot使用RestTemplate访问第三方接口
  3. Bash脚本教程之行操作
  4. 基于深度神经网络的动作检测:问题与解决方案
  5. python pandas 数据处理
  6. [Ramda] Complement: Logic opposite function
  7. STL 算法罗列 (转)
  8. 如何学习财务数据分析,有哪些好工具?
  9. 魅族16xs可升级Android10吗,手机评测 篇十一:用了魅族16Xs半个月,谈谈我的使用感受...
  10. lua 斗地主癞子牌型检测中使用递归
  11. aws服务器如何修改远程密码,谷歌云、亚马逊 AWS 设置 root 密码并开启 SSH 登录...
  12. 数据结构总结与知识网图
  13. 双u服务器装win7系统安装,u深度一键u盘装原版win7 安装系统详细使用教程
  14. 视觉特效,图片转成漫画功能
  15. 高清壁纸wallhaven.cc下载图片
  16. Hu距(Hu Moments)图像距介绍
  17. 提升搜索引擎的友好度只要五个步骤
  18. Pytorch使用大核的卷积神经网络: RepLKNet
  19. 【ISAR成像定标方法(1)—转台目标的RD成像算法MATLAB仿真】
  20. VirtualBox安装增强功能显示未能加载虚拟光盘到虚拟电脑

热门文章

  1. 【mysql】DATE_FORMAT()日期格式化
  2. sqlplus中调用shell_(转)shell 调用sqlplus各种情况示例
  3. promise的状态以及api介绍_Promise从入门到自定义 | 尚硅谷Promise新版视频发布!
  4. 二维分类教案_大班数学二维分类教案
  5. html div 自动聚焦,让DIV也能够获取焦点
  6. php 日志函数,php 写入日志函数
  7. python新建文件夹口令_Python 口令保管箱
  8. axios vue 加载效果动画_在vue中通过axios异步使用echarts
  9. 从零开始学习docker(十)搭建WordPress+Mysql,为什么要用Docker Compose
  10. 从零开始搭建spring-cloud(2) ----ribbon