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遍历节点方法汇总(推荐)
May 13 jQuery
jQuery正则验证注册页面经典实例
Jun 10 jQuery
jQuery序列化后的表单值转换成Json
Jun 16 jQuery
jQuery Collapse1.1.0折叠插件简单使用
Aug 28 jQuery
jQuery实现注册会员时密码强度提示信息功能示例
Sep 05 jQuery
用jquery获取select标签中选中的option值及文本的示例
Jan 25 jQuery
jQuery选择器之基本过滤选择器用法实例分析
Feb 19 jQuery
jquery使用echarts实现有向图可视化功能示例
Nov 25 jQuery
jquery更改元素属性attr()方法操作示例
May 22 jQuery
jQuery实现二级导航菜单的示例
Sep 30 jQuery
jQuery实现tab栏切换效果
Dec 22 jQuery
jquery实现鼠标悬浮弹出气泡提示框
Dec 23 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中mysql与mysqli的区别分析
2013/06/10 PHP
php使用qr生成二维码的示例分享
2014/01/20 PHP
php中heredoc与nowdoc介绍
2014/12/25 PHP
php实现的mongodb操作类
2015/05/28 PHP
php实现zip文件解压操作
2015/11/03 PHP
PHP addAttribute()函数讲解
2019/02/03 PHP
laravel 框架执行流程与原理简单分析
2020/02/01 PHP
HR vs CL BO3 第一场 2.13
2021/03/10 DOTA
jquery.validate使用攻略 第五步 正则验证
2010/07/01 Javascript
50个比较实用jQuery代码段
2011/09/18 Javascript
js获取 type=radio 值的方法
2014/05/09 Javascript
手写的一个兼容各种浏览器的javascript getStyle函数(获取元素的样式)
2014/06/06 Javascript
用JS实现轮播图效果(二)
2016/06/26 Javascript
实例浅析js的this
2016/12/11 Javascript
ionic2屏幕适配实现适配手机、平板等设备的示例代码
2017/08/11 Javascript
微信小程序使用npm支持踩坑
2018/11/07 Javascript
antd多选下拉框一行展示的实现方式
2020/10/31 Javascript
[46:25]DOTA2上海特级锦标赛主赛事日 - 4 败者组第五轮 MVP.Phx VS EG第二局
2016/03/05 DOTA
Python 文件读写操作实例详解
2014/03/12 Python
Python内建数据结构详解
2016/02/03 Python
python绘制条形图方法代码详解
2017/12/19 Python
利用Python+Java调用Shell脚本时的死锁陷阱详解
2018/01/24 Python
Django + Uwsgi + Nginx 实现生产环境部署的方法
2018/06/20 Python
python垃圾回收机制(GC)原理解析
2019/12/30 Python
OpenCV+python实现实时目标检测功能
2020/06/24 Python
英国最大的正宗复古足球衫制造商和零售商:TOFFS
2018/06/21 全球购物
中职生自我鉴定范文
2013/10/03 职场文书
机械专业毕业生自荐信
2013/11/02 职场文书
《三顾茅庐》教学反思
2014/04/10 职场文书
带病坚持工作事迹
2014/05/03 职场文书
煤矿安全生产月活动总结
2014/07/05 职场文书
支部书记四风问题自我剖析材料
2014/09/29 职场文书
2016道德模范先进事迹材料
2016/02/26 职场文书
pycharm2021激活码使用教程(永久激活亲测可用)
2021/03/30 Python
简单聊一聊SQL注入及防止SQL注入
2022/03/23 MySQL
SQL语句中EXISTS的详细用法大全
2022/06/25 MySQL