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实现菜单栏导航效果
Aug 15 jQuery
jQuery实现简单的回到顶部totop功能示例
Oct 16 jQuery
jquery 获取索引值在一定范围的列表方法
Jan 25 jQuery
jQuery中each方法的使用详解
Mar 18 jQuery
jQuery中的for循环var与let的区别
Apr 21 jQuery
详解如何使用webpack打包多页jquery项目
Feb 01 jQuery
jquery 遍历hash操作示例【基于ajax交互】
Oct 12 jQuery
jQuery鼠标滑过横向时间轴样式(代码详解)
Nov 01 jQuery
JQuery发送ajax请求时中文乱码问题解决
Nov 14 jQuery
JQuery中的常用事件、对象属性与使用方法分析
Dec 23 jQuery
jQuery实现评论模块
Aug 19 jQuery
jQuery实现电梯导航模块
Dec 22 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通用防注入程序 推荐
2011/02/26 PHP
php集成动态口令认证
2016/07/21 PHP
phpMyAdmin通过密码漏洞留后门文件
2018/11/20 PHP
IE浏览器兼容Firefox的JS脚本的代码
2008/10/23 Javascript
小议Javascript中的this指针
2010/03/18 Javascript
jquery中使用ajax获取远程页面信息
2011/11/13 Javascript
基于jQuery.Validate验证库知识点的详解
2013/04/26 Javascript
Javascript中数组sort和reverse用法分析
2014/12/30 Javascript
JQuery中模拟image的ajaxPrefilter与ajaxTransport处理
2015/06/19 Javascript
JS实现图片延迟加载并淡入淡出效果的简单方法
2016/08/25 Javascript
微信小程序 仿猫眼实现实例代码
2017/03/14 Javascript
JS请求servlet功能示例
2017/06/01 Javascript
JavaScript之DOM_动力节点Java学院整理
2017/07/03 Javascript
Vue中父组件向子组件通信的方法
2017/07/11 Javascript
jQuery代码优化方法总结
2018/01/29 jQuery
VUE 使用中踩过的坑
2018/02/08 Javascript
在vue项目中,使用axios跨域处理
2018/03/07 Javascript
vue路由拦截及页面跳转的设置方法
2018/05/24 Javascript
JavaScript中的null和undefined用法解析
2019/09/30 Javascript
JS实现的雪花飘落特效示例
2019/12/03 Javascript
机器学习python实战之决策树
2017/11/01 Python
python爬取内容存入Excel实例
2019/02/20 Python
int在python中的含义以及用法
2019/06/27 Python
Python 根据日志级别打印不同颜色的日志的方法示例
2019/08/08 Python
Python接口自动化测试的实现
2020/08/28 Python
python中的对数log函数表示及用法
2020/12/09 Python
Pandora西班牙官方商店:PandoraShop.es
2020/10/05 全球购物
新闻记者实习自我鉴定
2013/09/19 职场文书
中学教师实习自我鉴定
2013/09/28 职场文书
《月光启蒙》教学反思
2014/03/01 职场文书
小学三八妇女节活动方案
2014/03/16 职场文书
心理咨询专业自荐信
2014/07/07 职场文书
2015选调生工作总结
2015/07/24 职场文书
Python实现查询剪贴板自动匹配信息的思路详解
2021/07/09 Python
JavaScript 事件捕获冒泡与捕获详情
2021/11/11 Javascript
Java Spring Boot请求方式与请求映射过程分析
2022/06/25 Java/Android