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 Validate格式验证功能实例代码(包括重名验证)
Jul 18 jQuery
jQuery条件分页 代替离线查询(附代码)
Aug 17 jQuery
jQuery实现列表的增加和删除功能
Jun 14 jQuery
jQuery实现基本隐藏与显示效果的方法详解
Sep 05 jQuery
jQuery插件实现的日历功能示例【附源码下载】
Sep 07 jQuery
jQuery访问json文件中数据的方法示例
Jan 28 jQuery
jQuery添加新内容的四个常用方法分析【append,prepend,after,before】
Mar 19 jQuery
JS拖动选择table里的单元格完整实例【基于jQuery】
May 28 jQuery
如何使用CSS3+JQuery实现悬浮墙式菜单
Jun 18 jQuery
jQuery子选择器与可见性选择器实例分析
Jun 28 jQuery
jquery将信息遍历到界面上实例代码
Jan 21 jQuery
jquery html添加元素/删除元素操作实例详解
May 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
新闻分类录入、显示系统
2006/10/09 PHP
比file_get_contents稳定的curl_get_contents分享
2012/01/11 PHP
php根据某字段对多维数组进行排序的方法
2015/03/07 PHP
thinkphp框架page类与bootstrap分页(美化)
2017/06/25 PHP
laravel 5.5 关闭token的3种实现方式
2019/10/24 PHP
非常棒的10款jQuery 幻灯片插件
2011/06/14 Javascript
javascript 使td内容不换行不撑开
2012/11/29 Javascript
Windows8下搭建Node.js开发环境教程
2014/09/03 Javascript
浅析Node.js中使用依赖注入的相关问题及解决方法
2015/06/24 Javascript
AngularJS基础 ng-switch 指令简单示例
2016/08/03 Javascript
给easyui的datebox控件添加清空按钮的实现方法
2016/11/09 Javascript
使用Bootstrap Tabs选项卡Ajax加载数据实现
2016/12/23 Javascript
javascript自执行函数
2017/02/10 Javascript
jQuery中layer分页器的使用
2017/03/13 Javascript
vue-cli webpack 引入jquery的方法
2018/01/10 jQuery
JS实现调用本地摄像头功能示例
2018/05/18 Javascript
bootstrapTable+ajax加载数据 refresh更新数据
2018/08/31 Javascript
javascript实现移动端轮播图
2020/12/09 Javascript
javascript实现简单留言板案例
2021/02/09 Javascript
[47:12]TFT vs Secret Supermajor小组赛C组 BO3 第三场 6.3
2018/06/04 DOTA
python标准日志模块logging的使用方法
2013/11/01 Python
python实现一次创建多级目录的方法
2015/05/15 Python
详细解读Python中解析XML数据的方法
2015/10/15 Python
python中文乱码不着急,先看懂字节和字符
2017/12/20 Python
mac PyCharm添加Python解释器及添加package路径的方法
2018/10/29 Python
Django bulk_create()、update()与数据库事务的效率对比分析
2020/05/15 Python
详解CSS的border边框属性及其在CSS3中的新特性
2016/05/10 HTML / CSS
使用HTML和CSS实现的标签云效果(附demo)
2021/02/03 HTML / CSS
新西兰珠宝品牌:Michael Hill
2017/09/16 全球购物
AP澳洲中文网:澳洲正品直邮,包税收件无忧
2019/07/12 全球购物
教师自我鉴定
2013/12/13 职场文书
教育孩子心得体会
2014/01/01 职场文书
2013年研究生毕业感言
2014/02/06 职场文书
房产买卖委托公证书
2014/04/04 职场文书
小学毕业典礼演讲稿
2014/09/09 职场文书
四风查摆剖析材料
2014/10/10 职场文书