input 和 textarea 输入框最大文字限制的jquery插件

 更新时间:2011年10月27日 23:20:58   作者:  
input 和 textarea 输入框最大文字限制的jquery插件,需要的朋友可以参考下。
复制代码 代码如下:

/* input 和 textarea 最大文字限定插件
* 修改版, 一个中文表示1一个字, 一个英文半个字;
* 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
*/

String.prototype.getBytes = function () {
var cArr = this.match(/[^\x00-\xff]/ig);
return this.length + (cArr == null ? 0 : cArr.length);
};
(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 - Math.ceil(that.value.getBytes()/2));
};
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(Math.ceil(that.value.getBytes()/2));
}
} ,charDelSpeed
);
}
else this.value = that.value.substr(0,thelimit);
}
});
};
})(jQuery);

相关文章

  • JQuery获取表格数据示例代码

    JQuery获取表格数据示例代码

    这篇文章主要介绍了通过JQuery如何获取表格数据,下面有个不错的示例,大家可以参考下
    2014-05-05
  • jQuery基础知识点总结(必看)

    jQuery基础知识点总结(必看)

    下面小编就为大家带来一篇jQuery基础知识点总结(必看)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-05-05
  • jQuery实现首页顶部可伸缩广告特效代码

    jQuery实现首页顶部可伸缩广告特效代码

    一套使用jQuery 插件实现的广告特效代码,其效果类似全屏广告,打开网页后在网页的第一屏显示大幅广告,停留几秒后慢慢伸缩至标准小图片显示在网页预留位置上,效果非常不错,这里推荐给大家。
    2015-04-04
  • jquery中的常见问题及快速解决方法小结

    jquery中的常见问题及快速解决方法小结

    下面小编就为大家带来一篇jquery中的常见问题及快速解决方法小结。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • 基于JSON格式数据的简单jQuery幻灯片插件(jquery-slider)

    基于JSON格式数据的简单jQuery幻灯片插件(jquery-slider)

    jquery-slider幻灯片插件通过json数据来提供图片地址和描述信息,同时也可以更换json数据来动态切换不同的图片,对json数据jquery幻灯片插件相关知识感兴趣的朋友一起学习吧
    2016-08-08
  • 基于jQuery Easyui实现登陆框界面

    基于jQuery Easyui实现登陆框界面

    本文通过实例代码给大家分享了基于jQuery Easyui实现登陆框界面,代码简单易懂,非常不错,具有参考借鉴价值,需要的的朋友参考下吧
    2017-07-07
  • jQuery.form.js的使用详解

    jQuery.form.js的使用详解

    本文使用jquery.form.js解决提交之后,页面发生跳转,在一个空白页面上显示了后端返回的json数据问题,需要的朋友参考下
    2017-06-06
  • jQuery简单倒计时效果完整示例

    jQuery简单倒计时效果完整示例

    这篇文章主要介绍了jQuery简单倒计时效果,结合完整实例形式分析了jQuery针对日期与时间的计算与页面元素动态操作相关技巧,需要的朋友可以参考下
    2016-09-09
  • jQuery下拉框的简单应用

    jQuery下拉框的简单应用

    这篇文章主要为大家详细介绍了jQuery下拉框的简单应用,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-06-06
  • 使用jQuery和ajax代替iframe的方法(详解)

    使用jQuery和ajax代替iframe的方法(详解)

    下面小编就为大家带来一篇使用jQuery和ajax代替iframe的方法(详解)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-04-04

最新评论