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 验证表单(form)中多选框(checkbox)值
Sep 08 Javascript
深入理解JavaScript系列(15) 函数(Functions)
Apr 12 Javascript
Extjs4.0设置Ext.data.Store传参的请求方式(默认为GET)
Apr 02 Javascript
Jquery post传递数组方法实现思路及代码
Apr 28 Javascript
jQuery中:password选择器用法实例
Jan 03 Javascript
JS实现点击按钮后框架内载入不同网页的方法
May 05 Javascript
如何屏蔽防止别的网站嵌入框架代码
Aug 24 Javascript
解决给dom元素绑定click等事件无效问题的方法
Feb 17 Javascript
node.js之基础加密算法模块crypto详解
Sep 11 Javascript
webpack自动打包和热更新的实现方法
Jun 24 Javascript
解决vue net :ERR_CONNECTION_REFUSED报错问题
Aug 13 Javascript
JavaScript与JQuery框架基础入门教程
Jul 15 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
什么是MVC,好东西啊
2007/05/03 PHP
jQuery 图像裁剪插件Jcrop的简单使用
2009/05/22 Javascript
asp.net HttpHandler实现图片防盗链
2009/11/09 Javascript
Exjs 入门篇
2010/04/07 Javascript
jQuery 阴影插件代码分享
2012/01/09 Javascript
javascript 利用Image对象实现的埋点(某处的点击数)统计
2012/12/28 Javascript
jQuery实用函数用法总结
2014/08/29 Javascript
jQuery实现类似老虎机滚动抽奖效果
2015/08/06 Javascript
angularjs在ng-repeat中使用ng-model遇到的问题
2016/01/21 Javascript
学习AngularJs:Directive指令用法(完整版)
2016/04/26 Javascript
Jquery组件easyUi实现选项卡切换示例
2016/08/23 Javascript
实例讲解JavaScript中call、apply、bind方法的异同
2016/09/13 Javascript
jQuery插件HighCharts绘制2D柱状图、折线图和饼图的组合图效果示例【附demo源码下载】
2017/03/09 Javascript
Vue-cli proxyTable 解决开发环境的跨域问题详解
2017/05/18 Javascript
vue实现购物车抛物线小球动画效果的方法详解
2019/02/13 Javascript
js实现继承的方法及优缺点总结
2019/05/08 Javascript
Vue2.x通用条件搜索组件的封装及应用详解
2019/05/28 Javascript
vue中使用element组件时事件想要传递其他参数的问题
2019/09/18 Javascript
浅谈Webpack4 Tree Shaking 终极优化指南
2019/11/18 Javascript
ES2020系列之空值合并运算符 '??'
2020/07/22 Javascript
详解django中自定义标签和过滤器
2017/07/03 Python
Python数据结构之栈、队列的实现代码分享
2017/12/04 Python
matplotlib中legend位置调整解析
2017/12/19 Python
windows10下安装TensorFlow Object Detection API的步骤
2019/06/13 Python
PyQt5实现从主窗口打开子窗口的方法
2019/06/19 Python
tensorflow使用freeze_graph.py将ckpt转为pb文件的方法
2020/04/22 Python
CSS3制作酷炫的三维相册效果
2016/07/01 HTML / CSS
三年大学生活自我鉴定
2014/01/21 职场文书
企业内部培训方案
2014/02/04 职场文书
档案室主任岗位职责
2014/02/12 职场文书
个人银行贷款担保书
2014/04/01 职场文书
大学生标准自荐书
2014/06/15 职场文书
优秀团员事迹材料1500字
2014/08/31 职场文书
一定要知道的 25 个 Vue 技巧
2021/11/02 Vue.js
redis的list数据类型相关命令介绍及使用
2022/01/18 Redis
PYTHON InceptionV3模型的复现详解
2022/05/06 Python