jq实现文字个数限制_textarea文字限制，使用了JQ实现了textarea的文字数量的限制，兼容IE7及以上...

textarea有时候需要进行文字数量的限制，但是有时候照顾很多的浏览器(对，就是IE浏览器，说的就是你)必须使用js来做一个判断，这样对于用户的体验是很高的，这次我花费点时间使用jq做了一个textraea文字数量限制的效果，可以支持页面多个textraea文字数量限制，经过测试我写的代码可以兼容到IE7及以上，也兼容主流浏览器。

本textraea文字数量代码当页面加载完之后会执行一遍，文字有变化的时候也会执行，写代码的时候充分考虑了各种正常情况下不会出现问题(浏览者是正常浏览不使用暴力插件和暴力手段)。

注意事项：

1、textarea的自定义属性data-text-max是控制textarea最大文字限制的，只要把文字限制的数字写在里面就可以了。

2、class=”cgl_text_box”是最外面的容器，最好不要修改，这个也是多个textarea的情况下遍历的元素。

3、class=”cgl_text_no”是给剩余文字数量的容器的，也不要修改，标签可以随便选一个就可以。

4、class=”cgl_text_top”和class=”cgl_text_bot”两个class可有可无，这个就随便了。

5、JQ版本需要高于1.6以上

6、浏览器兼容IE7及以上，主流浏览器都没问题(注意一下JQ版本对IE浏览器的兼容)

点击下方的运行按钮，可以在线运行。

CGLweb前端 cenggel.com

你还可以输入 字

CGLweb前端 cenggel.com

你还可以输入 字

(function ($) {

/**

* JQ用得到的class为：cgl_text_box / cgl_text_no 其他的随意修改

* JQ用得到的data-为：data-text-max 其他的随意修改

* 兼容：IE7及以上、主流浏览器

* JQ版本：1.X 2.X 3.X

* 博客链接：http://cenggel.com/

* */

function cgl_text_fn(cgl_text_this) {

var cgl_text_len = cgl_text_this.val().length;//获取输入文字的长度

var cgl_text_max = cgl_text_this.parents('.cgl_text_box').find('.cgl_text_no').attr('data-text-max');//获取最长输入文字长度

var cgl_text_now = cgl_text_max - cgl_text_len;//剩余输入文字的长度

$cgl_text_show = cgl_text_this.parents('.cgl_text_box').find('.cgl_text_no');//数字显示的容器 PS:注意一下parents和parent的使用

if (cgl_text_len > cgl_text_max) {

//文字内容大于最大值时，大于最大值后面的文字删除，计算数值变成0

$cgl_text_show.text('0');

var cgl_text = cgl_text_this.val().substring(0, cgl_text_max);

cgl_text_this.val(cgl_text);

} else {

//文字内容小于等于最大值时正常计算文字长度

$cgl_text_show.text(cgl_text_now);

};

};

$('.cgl_text_box textarea').each(function () {

//初始化-页面加载执行

cgl_text_fn($(this))

});

$('.cgl_text_box').on('keyup mousedown mouseup focus blur ready','textarea',function(){//监听事件多点，主要针对鼠标粘贴复制和兼容

//执行-事件绑定执行

cgl_text_fn($(this))

});

})(jQuery);

body{ width:50%; margin:30px auto;}

.cgl_text_box{ width:100%; padding-bottom:40px;}

.cgl_text_box textarea{ display:block; height:150px; width:100%; font-size:16px; line-height:30px;}

运行