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 相关文章推荐
Javascript 类与静态类的实现(续)
Apr 02 Javascript
js 实现 input type=&quot;file&quot; 文件上传示例代码
Aug 07 Javascript
jquery获取select选中值的方法分析
Dec 22 Javascript
Bootstrap优化站点资源、响应式图片、传送带使用详解3
Oct 14 Javascript
浅谈javascript中的三种弹窗
Oct 21 Javascript
js正则表达式惰性匹配和贪婪匹配用法分析
Dec 26 Javascript
微信小程序canvas写字板效果及实例
Jun 15 Javascript
关于定制FileField中的上传文件名称问题
Aug 22 Javascript
vue组件间通信子与父详解(二)
Nov 07 Javascript
基于JavaScript实现简单的音频播放功能
Jan 07 Javascript
JavaScript类型相关的常用操作总结
Feb 14 Javascript
Vue如何循环提取对象数组中的值
Nov 18 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
php实现按照权重随机排序数据的方法
2015/01/09 PHP
微信公众平台之快递查询功能用法实例
2015/04/14 PHP
Laravel 5.4前后台分离,通过不同的二级域名访问方法
2019/10/13 PHP
Javascript打印网页部分内容的脚本
2008/11/17 Javascript
JavaScript的setAttribute兼容性问题解决方法
2013/11/11 Javascript
setInterval()和setTimeout()的用法和区别示例介绍
2013/11/17 Javascript
JS不间断向上滚动效果代码
2013/12/25 Javascript
javascript实现随机读取数组的方法
2015/08/03 Javascript
vue,angular,avalon这三种MVVM框架优缺点
2016/04/27 Javascript
jQuery插件实现图片轮播特效
2016/06/16 Javascript
jQuery Raty 一款不错的星级评分插件
2016/08/24 Javascript
scroll事件实现监控滚动条并分页显示(zepto.js)
2016/12/18 Javascript
node.js程序作为服务并在windows下开机自启动(用forever)
2017/03/29 Javascript
JS+Ajax实现百度智能搜索框
2017/08/04 Javascript
使用JSON格式提交数据到服务端的实例代码
2018/04/01 Javascript
vue中使用element-ui进行表单验证的实例代码
2018/06/22 Javascript
vue深度监听(监听对象和数组的改变)与立即执行监听实例
2020/09/04 Javascript
Python标准库urllib2的一些使用细节总结
2015/03/16 Python
python中copy()与deepcopy()的区别小结
2018/08/03 Python
对Python random模块打乱数组顺序的实例讲解
2018/11/08 Python
Python3实现爬取简书首页文章标题和文章链接的方法【测试可用】
2018/12/11 Python
Django shell调试models输出的SQL语句方法
2019/08/29 Python
用python介绍4种常用的单链表翻转的方法小结
2020/02/24 Python
pyqt5 QlistView列表显示的实现示例
2020/03/24 Python
用canvas做一个DVD待机动画的实现代码
2019/04/12 HTML / CSS
美国玩具公司:U.S.Toy
2018/05/19 全球购物
不同浏览器创建XMLHttpRequest方法有什么不同
2014/11/17 面试题
工程项目建议书范文
2014/03/12 职场文书
岗位说明书范文
2014/05/07 职场文书
财务人员担保书
2014/05/13 职场文书
销售求职信范文
2014/05/26 职场文书
镇创先争优活动总结
2014/08/28 职场文书
护士节慰问信
2015/02/15 职场文书
公司财务制度:成本管理控制制度模板
2019/11/19 职场文书
PyTorch dropout设置训练和测试模式的实现
2021/05/27 Python
开发微信小程序之WXSS样式教程
2022/04/18 HTML / CSS