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实现鼠标经过显示动画边框特效
Mar 24 jQuery
jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一
May 26 jQuery
jQuery 表单序列化实例代码
Jun 11 jQuery
jQuery实现腾讯信用界面(自制刻度尺)样式
Aug 15 jQuery
jquery获取链接地址和跳转详解(推荐)
Aug 15 jQuery
jQuery实现简单日期格式化功能示例
Sep 19 jQuery
JavaScript实现离开页面前提示功能【附jQuery实现方法】
Sep 26 jQuery
JQuery实现table中tr上移下移的示例(超简单)
Jan 08 jQuery
jquery点击回车键实现登录效果并默认焦点的方法
Mar 09 jQuery
jquery检测上传文件大小示例
Apr 26 jQuery
如何基于jQuery实现五角星评分
Sep 02 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 表单数据的获取代码
2009/03/10 PHP
php图片上传类 附调用方法
2016/05/15 PHP
PHP使用XMLWriter读写xml文件操作详解
2018/07/31 PHP
laravel 解决groupBy时出现的错误 isn't in Group By问题
2019/10/17 PHP
ajaxFileUpload.js插件支持多文件上传的方法
2014/09/02 Javascript
Jquery对象和Dom对象的区别分析
2014/11/20 Javascript
node.js中的fs.unlink方法使用说明
2014/12/15 Javascript
JS实现消息来时让网页标题闪动效果的方法
2016/04/20 Javascript
基于JavaScript FileReader上传图片显示本地链接
2016/05/27 Javascript
js中利用cookie实现记住密码功能
2020/08/20 Javascript
jquery使用EasyUI Tree异步加载JSON数据(生成树)
2017/02/11 Javascript
hammer.js实现图片手势放大效果
2017/08/29 Javascript
Vue自定义指令写法与个人理解
2019/02/09 Javascript
JS使用正则表达式实现常用的表单验证功能分析
2020/04/30 Javascript
[03:20]次级联赛厮杀超职业 现超级兵对拆世纪大战
2014/10/30 DOTA
[00:20]TI9观赛名额抽取Ⅱ
2019/07/24 DOTA
Python中enumerate函数代码解析
2017/10/31 Python
python机器学习实战之K均值聚类
2017/12/20 Python
Python下调用Linux的Shell命令的方法
2018/06/12 Python
python看某个模块的版本方法
2018/10/16 Python
实例讲解Python中浮点型的基本内容
2019/02/11 Python
Python实现简单的列表冒泡排序和反转列表操作示例
2019/07/10 Python
使用python的turtle绘画滑稽脸实例
2019/11/21 Python
PyCharm MySQL可视化Database配置过程图解
2020/06/09 Python
Python 实现自动登录+点击+滑动验证功能
2020/06/10 Python
在线学习西班牙语、法语或其他语言:Babbel.com
2018/02/07 全球购物
全球高级音频和视频专家:HiDef Lifestyle
2019/08/02 全球购物
试述DBMS的主要功能
2016/11/13 面试题
什么是Assembly(程序集)
2014/09/14 面试题
日语专业推荐信
2013/11/12 职场文书
党员民主评议个人总结
2014/10/20 职场文书
文明单位创建材料
2014/12/24 职场文书
​(迎国庆)作文之我爱我的祖国
2019/09/19 职场文书
开学季:喜迎新生,迎新标语少不了
2019/11/07 职场文书
《悬崖边的树》读后感2篇
2019/12/02 职场文书
python设置 matplotlib 正确显示中文的四种方式
2021/05/10 Python