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 常用方法总结
Jun 03 Javascript
使用Json比用string返回数据更友好,也更面向对象一些
Sep 13 Javascript
jQuery筛选器children()案例详解(图文)
Feb 17 Javascript
理解JAVASCRIPT中hasOwnProperty()的作用
Jun 05 Javascript
基于jquery实现的定时显示与隐藏div广告的实现代码
Aug 22 Javascript
给文字加上着重号的JS代码
Nov 12 Javascript
jQuery实现下拉框功能实例代码
May 06 Javascript
详解PHP中pathinfo()函数导致的安全问题
Jan 05 Javascript
vue权限路由实现的方法示例总结
Jul 29 Javascript
微信小程序实现自动定位功能
Oct 31 Javascript
如何解决webpack-dev-server代理常切换问题
Jan 09 Javascript
解决layer弹出层中表单不起作用的问题
Sep 09 Javascript
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
上海永华YH-R296(华普R-96)12波段立体声收音机的分析和打理
2021/03/02 无线电
介绍几个array库的新函数 php
2006/12/29 PHP
如何获知PHP程序占用多少内存(memory_get_usage)
2012/09/23 PHP
解析百度搜索结果link?url=参数分析 (全)
2012/10/09 PHP
破解.net程序(dll文件)编译和反编译方法
2013/01/31 PHP
php获取json数据所有的节点路径
2015/05/17 PHP
syntaxhighlighter 使用方法
2007/07/02 Javascript
js 获取元素在页面上的偏移量的方法汇总
2015/04/13 Javascript
基于JavaScript获取鼠标位置的各种方法
2015/12/16 Javascript
全面解析Bootstrap中Carousel轮播的使用方法
2016/06/13 Javascript
JavaScript数据类型的存储方法详解
2017/08/25 Javascript
微信小程序实现图片预览功能
2018/01/31 Javascript
vue生命周期实例小结
2018/08/15 Javascript
微信小程序整个页面的自动适应布局的实现
2020/07/12 Javascript
解决vue单页面 回退页面 keeplive 缓存问题
2020/07/22 Javascript
javascript读取本地文件和目录方法详解
2020/08/06 Javascript
python通过ssh-powershell监控windows的方法
2015/06/02 Python
浅谈Python中函数的参数传递
2016/06/21 Python
浅谈Series和DataFrame中的sort_index方法
2018/06/07 Python
python 字典中取值的两种方法小结
2018/08/02 Python
Pandas:Series和DataFrame删除指定轴上数据的方法
2018/11/10 Python
python读写csv文件方法详细总结
2019/07/05 Python
python3 selenium自动化 frame表单嵌套的切换方法
2019/08/23 Python
wxPython之wx.DC绘制形状
2019/11/19 Python
tensorflow mnist 数据加载实现并画图效果
2020/02/05 Python
利用python中集合的唯一性实现去重
2020/02/11 Python
pytorch使用tensorboardX进行loss可视化实例
2020/02/24 Python
利用 CSS3 实现的无缝轮播功能代码
2017/09/25 HTML / CSS
英国Office鞋店德国网站:在线购买鞋子、靴子和运动鞋
2018/12/19 全球购物
捷克购买家具网站:JENA nábytek
2020/03/19 全球购物
2014年三八妇女节活动方案
2014/02/28 职场文书
交通事故委托书范本
2014/09/28 职场文书
房地产销售经理岗位职责
2015/02/02 职场文书
业务员年终工作总结2015
2015/05/28 职场文书
《兰兰过桥》教学反思
2016/02/20 职场文书
快速学习Oracle触发器和游标
2021/06/30 Oracle