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


Posted in Javascript onOctober 27, 2011
/* 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);
Javascript 相关文章推荐
JS组件Bootstrap Select2使用方法详解
Apr 17 Javascript
JS+CSS实现DIV层的展开、收缩效果
Jan 28 Javascript
聊一聊jQuery插件uploadify使用方法
Aug 24 Javascript
bootstarp modal框居中显示的实现代码
Feb 18 Javascript
JavaScript 过滤关键字
Mar 20 Javascript
jQuery中的deferred使用方法
Mar 27 jQuery
基于Vuejs和Element的注册插件的编写方法
Jul 03 Javascript
前端开发不得不知的10个最佳ES6特性
Aug 30 Javascript
基于vue的换肤功能的示例代码
Oct 10 Javascript
详解Angular结合zTree异步加载节点数据
Jan 20 Javascript
js中Object.create实例用法详解
Oct 05 Javascript
Vue如何清空对象
Mar 03 Vue.js
VBS通过WMI监视注册表变动的代码
Oct 27 #Javascript
JavaScript Memoization 让函数也有记忆功能
Oct 27 #Javascript
JavaScript 类型的包装对象(Typed Wrappers)
Oct 27 #Javascript
40款非常棒的jQuery 插件和制作教程(系列一)
Oct 26 #Javascript
JavaScript学习笔记(二) js对象
Oct 25 #Javascript
JavaScript学习笔记(一) js基本语法
Oct 25 #Javascript
jQuery数据显示插件整合实现代码
Oct 24 #Javascript
You might like
DC《小丑》11项提名领跑奥斯卡 Netflix成第92届奥斯卡提名最大赢家
2020/04/09 欧美动漫
基于PHP array数组的教程详解
2013/06/05 PHP
Laravel中间件实现原理详解
2016/10/09 PHP
PHP将身份证正反面两张照片合成一张图片的代码
2017/04/08 PHP
TP5框架model常见操作示例小结【增删改查、聚合、时间戳、软删除等】
2020/04/05 PHP
ExtJS Store的数据访问与更新问题
2010/04/28 Javascript
jQuery分别获取选中的复选框值的示例
2014/06/17 Javascript
基于JavaScript代码实现兼容各浏览器的设为首页和加入收藏
2016/01/07 Javascript
jQuery遍历DOM节点操作之filter()方法详解
2016/04/14 Javascript
vue调用高德地图实例代码
2017/04/28 Javascript
angular.extend方法的具体使用
2017/09/14 Javascript
Easy UI动态树点击文字实现展开关闭功能
2017/09/30 Javascript
Vue下滚动到页面底部无限加载数据的示例代码
2018/04/22 Javascript
Javascript基于OOP实实现探测器功能代码实例
2020/08/26 Javascript
[01:36]DOTA2完美大师赛趣味视频之与队友相处的十万个技巧
2017/11/19 DOTA
Python实现的一个自动售饮料程序代码分享
2014/08/25 Python
两个使用Python脚本操作文件的小示例分享
2015/08/27 Python
PyCharm在win10的64位系统安装实例
2017/11/26 Python
Flask框架响应、调度方法和蓝图操作实例分析
2018/07/24 Python
python函数的万能参数传参详解
2019/07/26 Python
python分布式编程实现过程解析
2019/11/08 Python
python中for in的用法详解
2020/04/17 Python
Python基于network模块制作电影人物关系图
2020/06/19 Python
matplotlib 使用 plt.savefig() 输出图片去除旁边的空白区域
2021/01/05 Python
Farah官方网站:男士服装及配件
2019/11/01 全球购物
C#实现对任一张表的数据进行增,删,改,查要求,运用Webservice,体现出三层架构
2014/07/11 面试题
关于Java finally的面试题
2016/04/27 面试题
J2ee常用的设计模式?说明工厂模式
2015/05/21 面试题
行政总监岗位职责
2013/12/05 职场文书
幼儿园家长评语
2014/02/10 职场文书
入党积极分子自我鉴定
2014/02/18 职场文书
中餐厅经理岗位职责
2014/04/11 职场文书
公司合作协议范文
2014/10/01 职场文书
研究生给导师的自荐信
2015/03/06 职场文书
2015年幼儿园大班工作总结
2015/04/25 职场文书
2016幼儿园毕业感言
2015/12/08 职场文书