texearea 限制字数_有关textarea的字数限制这里有话要说

前言

textarea是网页设计开发最常见也是最基本的控件之一，它与input控件不同，具有独特的设计思路和实现形式，它常配合一些编辑器插件(如ueditor、ckeditor等)来实现多样的效果。

textarea字数限制注意事项

1.maxlength

maxlength 属性规定输入字段的最大长度，以字符个数计。maxlength 属性与 或 配合使用。textarea没有这种属性(HTML5中才支持)，那么要做到textarea的字数限制就需要用JS来获取textarea的长度，然后再进行长度的判断。这里有一点特别需要注意的地方：单纯的textarea的键盘输入，是可以明确的得到textarea的长度的，但是在复制粘贴情况下，实际的字符数有可能比通过js获取的字符数要多。

例如：一个textarea输入框，如果内容是通过复制网页粘贴进去的内容，加入存储的数据库长度为500，用JS计算出的textarea的输入长度也是500，但是在将内容插入到数据库字段中的时候，可能会报错，数据超长，有一些像软回车样的字符等是JS所不能判断的，这一点需要特别注意。

2.实现“还可以输入XX个字的代码实例”

(function($) {

$.fn.limitTextarea = function(opts) {

var defaults = {

maxNumber: 140, //允许输入的最大字数

position: 'top', //提示文字的位置，top：文本框上方，bottom：文本框下方

onOk: function() {}, //输入后，字数未超出时调用的函数

onOver: function() {} //输入后，字数超出时调用的函数

}

var option = $.extend(defaults, opts);

this.each(function() {

var _this = $(this);

var info = '

还可以输入 ' + (option.maxNumber - _this.val().length) + '字

';

var fn = function() {

var $info = $("#info");

var extraNumber = option.maxNumber - _this.val().length;

if (extraNumber >= 0) {

$info.html('还可以输入' + extraNumber + '个字');

option.onOk();

} else {

$info.html('已经超出' + (-extraNumber) + '个字');

option.onOver();

}

};

switch (option.position) {

case 'top':

_this.before(info);

break;

case 'bottom':

default:

_this.after(info);

}

//绑定输入事件监听器

if (window.addEventListener) { //先执行W3C

_this.get(0).addEventListener("input", fn, false);

} else {

_this.get(0).attachEvent("onpropertychange", fn);

}

if (window.VBArray && window.addEventListener) { //IE9

_this.get(0).attachEvent("onkeydown", function() {

var key = window.event.keyCode;

(key == 8 || key == 46) && fn(); //处理回退与删除

});

_this.get(0).attachEvent("oncut", fn); //处理粘贴

}

});

}

})(jQuery)

结语

不管你碰到什么样的问题，请留言下方，一起探讨解决。