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 相关文章推荐
JavaScript使用链式方法封装jQuery中CSS()方法示例
Apr 07 jQuery
利用jQuery解析获取JSON数据
Apr 08 jQuery
jQuery 实现鼠标画框并对框内数据选中的实例代码
Aug 29 jQuery
zTree jQuery 树插件的使用(实例讲解)
Sep 25 jQuery
基于jQuery实现Ajax验证用户名是否可用实例
Mar 25 jQuery
jQuery实现条件搜索查询、实时取值及升降序排序的方法分析
May 04 jQuery
使用jQuery mobile NuGet让你的网站在移动设备上同样精彩
Jun 18 jQuery
基于JQuery实现页面定时弹出广告
May 08 jQuery
jQuery实现鼠标拖拽登录框移动效果
Sep 13 jQuery
jQuery实现本地存储
Dec 22 jQuery
ajax jquery实现页面某一个div的刷新效果
Mar 04 jQuery
jQuery实现广告显示和隐藏动画
Jul 04 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 开源AJAX框架14种
2009/08/24 PHP
详谈php静态方法及普通方法的区别
2016/10/04 PHP
PHP parse_ini_file函数的应用与扩展操作示例
2019/01/07 PHP
juqery 学习之六 CSS--css、位置、宽高
2011/02/11 Javascript
javascript处理表单示例(javascript提交表单)
2014/04/28 Javascript
jquery原理以及学习技巧介绍
2015/11/11 Javascript
angularjs 源码解析之injector
2016/08/22 Javascript
详解AngularJs中$resource和restfu服务端数据交互
2016/09/21 Javascript
JavaScript解析任意形式的json树型结构展示
2017/07/23 Javascript
node.js基础知识小结
2018/02/26 Javascript
nodejs+mongodb aggregate级联查询操作示例
2018/03/17 NodeJs
在Vue项目中引入JQuery-ui插件的讲解
2019/01/27 jQuery
javascript中数组的常用算法深入分析
2019/03/12 Javascript
原生JS实现随机点名项目的实例代码
2019/04/30 Javascript
js将URL网址转为16进制加密与解密函数
2020/03/04 Javascript
微信小程序实现抖音播放效果的实例代码
2020/04/11 Javascript
JS遍历树层级关系实现原理解析
2020/08/31 Javascript
ES11新增的这9个新特性,你都掌握了吗
2020/10/15 Javascript
通过实例解析js可枚举属性与不可枚举属性
2020/12/02 Javascript
跟老齐学Python之玩转字符串(1)
2014/09/14 Python
python解决Fedora解压zip时中文乱码的方法
2016/09/18 Python
Python爬虫番外篇之Cookie和Session详解
2017/12/27 Python
基于Python实现的ID3决策树功能示例
2018/01/02 Python
Python制作词云的方法
2018/01/03 Python
2018年Python值得关注的开源库、工具和开发者(总结篇)
2018/01/04 Python
python实现手机通讯录搜索功能
2018/02/22 Python
pyQT5 实现窗体之间传值的示例
2019/06/20 Python
修复iPhone的safari浏览器上submit按钮圆角bug
2012/12/24 HTML / CSS
梅西百货澳大利亚:Macy’s Australia
2017/07/26 全球购物
Opodo意大利:欧洲市场上领先的在线旅行社
2019/10/24 全球购物
庆六一文艺汇演活动方案
2014/08/26 职场文书
党员四风问题对照检查材料思想汇报
2014/09/16 职场文书
习总书记三严三实学习心得体会
2014/10/13 职场文书
未中标通知书
2015/04/17 职场文书
vue实现列表垂直无缝滚动
2022/04/08 Vue.js
前端使用svg图片改色实现示例
2022/07/23 HTML / CSS