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对象的property和prototype是这样一种关系
Mar 24 Javascript
js(JavaScript)实现TAB标签切换效果的简单实例
Feb 26 Javascript
window.open不被拦截的简单实现代码(推荐)
Aug 04 Javascript
JavaScript数组去重的6个方法
Jan 21 Javascript
Angularjs自定义指令实现三级联动 选择地理位置
Feb 13 Javascript
微信小程序左右滑动的实现代码
Dec 15 Javascript
vue-cli webpack模板项目搭建及打包时路径问题的解决方法
Feb 26 Javascript
详解微信小程序实现WebSocket心跳重连
Jul 31 Javascript
使用JS获取页面上的所有标签
Oct 18 Javascript
vue-router实现嵌套路由的讲解
Jan 19 Javascript
vue.js基于v-for实现批量渲染 Json数组对象列表数据示例
Aug 03 Javascript
在JavaScript中如何使用宏详解
May 06 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
基于php无限分类的深入理解
2013/06/02 PHP
php处理带有中文URL的方法
2016/07/11 PHP
laravel5.6框架操作数据curd写法(查询构建器)实例分析
2020/01/26 PHP
用js实现预览待上传的本地图片
2007/03/15 Javascript
jQuery:delegate中select()不起作用的解决方法(实例讲解)
2014/01/26 Javascript
jquery获取对象的方法足以应付常见的各种类型的对象
2014/05/14 Javascript
nodejs教程之环境安装及运行
2014/11/21 NodeJs
js实现黑色简易的滑动门网页tab选项卡效果
2015/08/31 Javascript
jQuery+canvas实现的球体平抛及颜色动态变换效果
2016/01/28 Javascript
jQuery绑定事件on()与弹窗的简要概述
2016/04/27 Javascript
React创建组件的三种方式及其区别
2017/01/12 Javascript
JS判断指定dom元素是否在屏幕内的方法实例
2017/01/23 Javascript
js实现文字跑马灯效果
2017/02/23 Javascript
关于Sequelize连接查询时inlude中model和association的区别详解
2017/02/27 Javascript
纯jQuery实现前端分页功能
2017/03/23 jQuery
js前端实现图片懒加载(lazyload)的两种方式
2017/04/24 Javascript
JavaScript简单实现合并两个Json对象的方法示例
2017/10/16 Javascript
vue利用better-scroll实现轮播图与页面滚动详解
2017/10/20 Javascript
angularjs中判断ng-repeat是否迭代完的实例
2018/09/12 Javascript
解决vue keep-alive 数据更新的问题
2018/09/21 Javascript
JavaScript函数Call、Apply原理实例解析
2020/02/17 Javascript
5种Python单例模式的实现方式
2016/01/14 Python
Sanic框架安装与简单入门示例
2018/07/16 Python
解决tensorflow模型参数保存和加载的问题
2018/07/26 Python
Python帮你微信头像任意添加装饰别再@微信官方了
2019/09/25 Python
Django 框架模型操作入门教程
2019/11/05 Python
tensorflow ckpt模型和pb模型获取节点名称,及ckpt转pb模型实例
2020/01/21 Python
Python tkinter之Bind(绑定事件)的使用示例
2021/02/05 Python
HTML5新增加的功能详解
2016/09/05 HTML / CSS
老人节主持词
2015/07/04 职场文书
《詹天佑》教学反思
2016/02/20 职场文书
《中华上下五千年》读后感3篇
2019/11/29 职场文书
PySwarms(Python粒子群优化工具包)的使用:GlobalBestPSO例子解析
2021/04/05 Python
MySQL磁盘碎片整理实例演示
2022/04/03 MySQL
golang为什么要统一错误处理
2022/04/03 Golang
mysql查找连续出现n次以上的数字
2022/05/11 MySQL