JS与jQuery判断文本框还剩多少字符可以输入的方法


Posted in jQuery onSeptember 01, 2018

本文实例讲述了JS与jQuery判断文本框还剩多少字符可以输入的方法。分享给大家供大家参考,具体如下:

javascript部分:

function $(id) {
  return document.getElementById(id);
}
var maxLen=255;
function checkMaxInput(){
  if($("summary").value.length>maxLen){
    $("summary").value=$("summary").value.substring(0,maxLen);
  }else{
    $("leaves").innerHTML=maxLen-$("summary").value.length;
  }
}

HTML部分:

<tr>
 <td>摘要:</td>
 <td>
  <html:textarea property="summary" rows="5" cols="60" onkeyup="checkMaxInput()"/>
  <br>
   还可以输入<span class="red" id="leaves">255</span>个字符
  </td>
</tr>

jQuery插件textlimit实现Javascript统计和限制字符个数功能

使用jQuery插件textlimit可以实现统计和限制字符个数功能,可应用于文本框与文本区域,当输入文字时textlimit插件会及时统计当前文本框与文本区域中的字符个数,如果达到限制数则不允许输入,同时可设置字符删除速度,

使用实例

一、包含文件部分

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="textlimit.js"></script>

二、HTML部分

<input type="text" name="test" value="" id="test" /><span>20</span>/256

三、Javascript部分

<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#test").textlimit("span",256);
});
</script>

当在ID为test的文本框中输入文字时,textlimit插件统计当前输入字符个数并显示在一个span的元素中,如上效果图,textlimit接口如下:

textlimit(counter_el, thelimit, speed)

接口参数说明:

  • counter_el表示显示当前统计个数的选择器标签,如:span
  • thelimit表示限制个数,也就是最多可输入的个数,如:256
  • speed表示删除字符速度,默认为15,注意,如果不需要可设置为-1,但不能是0

注意:英文字符与汉字字符都统计为一个字符

textlimit插件统计和限制字符数非常简单,具体大家可以看看textlimit的库文件,非常值得推荐。

/*
 * TextLimit - jQuery plugin for counting and limiting characters for input and textarea fields
 *
 * pass '-1' as speed if you don't want the char-deletion effect. (don't just put 0)
 * Example: jQuery("Textarea").textlimit('span.counter',256)
 *
 * $Version: 2009.07.25 +r2
 * Copyright (c) 2009 Yair Even-Or
 * vsync.design@gmail.com
*/
(function(jQuery) {
  jQuery.fn.textlimit=function(counter_el, thelimit, speed) {
    var charDelSpeed = speed || 15;
    var toggleCharDel = speed != -1;
    var toggleTrim = true;
    var that = this[0];
    var isCtrl = false;
    updateCounter();
    function updateCounter(){
      if(typeof that == "object")
        jQuery(counter_el).text(thelimit - that.value.length+" characters remaining");
    };
    this.keydown (function(e){
      if(e.which == 17) isCtrl = true;
      var ctrl_a = (e.which == 65 && isCtrl == true) ? true : false; // detect and allow CTRL + A selects all.
      var ctrl_v = (e.which == 86 && isCtrl == true) ? true : false; // detect and allow CTRL + V paste.
      // 8 is 'backspace' and 46 is 'delete'
      if( this.value.length >= thelimit && e.which != '8' && e.which != '46' && ctrl_a == false && ctrl_v == false)
        e.preventDefault();
    })
    .keyup (function(e){
      updateCounter();
      if(e.which == 17)
        isCtrl=false;
      if( this.value.length >= thelimit && toggleTrim ){
        if(toggleCharDel){
          // first, trim the text a bit so the char trimming won't take forever
          // Also check if there are more than 10 extra chars, then trim. just in case.
          if ( (this.value.length - thelimit) > 10 )
            that.value = that.value.substr(0,thelimit+100);
          var init = setInterval
            (
              function(){
                if( that.value.length <= thelimit ){
                  init = clearInterval(init); updateCounter()
                }
                else{
                  // deleting extra chars (one by one)
                  that.value = that.value.substring(0,that.value.length-1); jQuery(counter_el).text('Trimming... '+(thelimit - that.value.length));
                }
              } ,charDelSpeed
            );
        }
        else this.value = that.value.substr(0,thelimit);
      }
    });
  };
})(jQuery);
jQuery 相关文章推荐
基于JQuery和原生JavaScript实现网页定位导航特效
Apr 03 jQuery
jquery 校验中国身份证号码实例详解
Apr 11 jQuery
关于jQuery中fade(),show()起始位置的一点小发现
Apr 25 jQuery
jQuery 实现图片的依次加载图片功能
Jul 06 jQuery
jquery.uploadView 实现图片预览上传功能
Aug 10 jQuery
使用jQuery实现简单的tab框实例
Aug 22 jQuery
jquery中ajax请求后台数据成功后既不执行success也不执行error的完美解决方法
Dec 24 jQuery
jQuery实现通过方向键控制div块上下左右移动的方法【测试可用】
Apr 26 jQuery
jQuery滑动效果实现方法分析
Sep 05 jQuery
jQuery动态生成的元素绑定事件操作实例分析
May 04 jQuery
jQuery实现input[type=file]多图预览上传删除等功能
Aug 02 jQuery
jquery向后台提交数组的代码分析
Feb 20 jQuery
jQuery解析json格式数据示例
Sep 01 #jQuery
jQuery实现表格隔行换色
Sep 01 #jQuery
基于jQuery ztree实现表格风格的树状结构
Aug 31 #jQuery
解决jQuery使用append添加的元素事件无效的问题
Aug 30 #jQuery
jQuery实现的简单手风琴效果示例
Aug 29 #jQuery
jQuery实现的淡入淡出图片轮播效果示例
Aug 29 #jQuery
jQuery实现的响应鼠标移动方向插件用法示例【附源码下载】
Aug 28 #jQuery
You might like
PHP备份数据库生成SQL文件并下载的函数代码
2012/02/05 PHP
CI框架入门之MVC简单示例
2016/11/21 PHP
PHP自带方法验证邮箱、URL、IP是否合法的函数
2016/12/08 PHP
JQuery操作Select的Options的Bug(IE8兼容性视图模式)
2013/04/21 Javascript
javascript常用方法汇总
2014/12/02 Javascript
javascript实现禁止右键和F12查看源代码
2014/12/26 Javascript
JavaScript检测浏览器cookie是否已经启动的方法
2015/02/27 Javascript
javascript实现无缝上下滚动特效
2015/12/16 Javascript
JavaScript基础知识点归纳(推荐)
2016/07/09 Javascript
Bootstrap源码解读标签、徽章、缩略图和警示框(8)
2016/12/26 Javascript
jQuery ajax的功能实现方法详解
2017/01/06 Javascript
NodeJS仿WebApi路由示例
2017/02/28 NodeJs
ionic实现底部分享功能
2017/05/11 Javascript
JS自动生成动态HTML验证码页面
2017/06/14 Javascript
php main 与 iframe 相互通讯类(js+php同域/跨域)
2017/09/14 Javascript
bootstrap datetimepicker控件位置异常的解决方法
2017/11/23 Javascript
详解使用Next.js构建服务端渲染应用
2018/07/10 Javascript
手把手带你封装一个vue component第三方库
2019/02/14 Javascript
PYTHON正则表达式 re模块使用说明
2011/05/19 Python
python翻译软件实现代码(使用google api完成)
2013/11/26 Python
Python实现二叉搜索树
2016/02/03 Python
基于Python闭包及其作用域详解
2017/08/28 Python
python远程邮件控制电脑升级版
2019/05/23 Python
Python爬虫爬取电影票房数据及图表展示操作示例
2020/03/27 Python
Python DES加密实现原理及实例解析
2020/07/17 Python
使用OpenCV实现人脸图像卡通化的示例代码
2021/01/15 Python
人力资源管理毕业生自荐信
2013/11/21 职场文书
大学生职业生涯规划书范文
2014/01/04 职场文书
市三好学生主要事迹
2014/01/28 职场文书
保护环境的建议书
2014/03/12 职场文书
组工干部演讲稿
2014/09/02 职场文书
预备党员学习十八届三中全会精神思想汇报
2014/09/13 职场文书
如何撰写出一份完美的商业计划书?
2019/07/12 职场文书
pycharm2021激活码使用教程(永久激活亲测可用)
2021/03/30 Python
详解Nginx启动失败的几种错误处理
2021/04/01 Servers
python通过新建环境安装tfx的问题
2022/05/20 Python