如何限制textarea标签文本长度

方法1：使用maxlength属性

<textarea id="mess-input" type="text" name="message" maxlength="10"></textarea><br>

使用maxlength即可限制最大字符数，但该属性不兼容IE8，所以考虑用下面的办法。

方法2：js实现-达到最大长度后镇态禁用键盘输入御神源

window.onload = function()

{

document.getElementById('text1').onkeydown = function()

{

if(this.value.length >= 10)

event.returnValue = false

}

}

上述代码在textarea值长度超过10时，禁用键盘输入。但该方法在firefox17浏览器中不兼容，且有两个bug。

1.长度达到最大以后，由于屏蔽键盘动作，已输入的文本内容无法删除和编辑。

2.如果使用ctrl+v直接粘贴入一段长度超限的文本，则该方法无效。

方法3：js实现-用substr方法截取textarea前端若干字内容

function limitLength(obj, length) {

var desc = obj.value

obj.value = substr(obj.value, length)

}

function substr(str, length) {

var l = 0, i = 0

while (l <length &&i <str.length) {

l += 1

if (str.substring(i, i + 1).match(/[\u4e00-\u9fa5]/)) l += 2

i += 1

}

return str.substring(0, i)

}

该方法监测文本框输入，当超出最大长度时，从前面截取最大长度个字节放入文本框中。该方法在各浏览器中均支持，且无方法2中的各种问题。

以上就是限制<textarea>标签最大字符数的3种方法，如果需要分别限制中英文字符数的话，在js代码前加一段正则表达式匹配，并分别做限制即可。

中文及字符正则表达式：瞎纤 /[^ -~]+/g

ASCII码正则表达式： /\D+/g

CSS3中新增了resize缩放属性，这个属性可以应用到任意元素。目前只有Webkit内核的浏览器才支持这个css3属性，即Google chrome和Apple safari都支持。

而textarea标签中，Webkit内核的浏览器会默认resize的值为both，即用户可以调节元素的宽度和高度。如下图就是在Google chrome中我博客的textarea的默认显示，textarea右下角有一个可以控制缩放的按钮。

一般情况下，textarea是被固定宽度和高度的，如果你不愿意让其任意缩放，你可以为textarea添加resize:none的css属性。这样就可以去除Webkit内核的浏览器的默认显示。

以下是resize属性的的各个取值:

none：用户锋逗不能 *** 纵机制调节元素的尺寸；

both：用银郑卖户可以调节元素的宽度和高度；

horizontal：用户可以调节元素的宽度；

vertical：让用户可以调节元素的高丛燃度；

inherit：默认继承。

---