JavaScript学习笔记5--限制textarea的字符数
<input />元素可以通过maxlength属性限制允许输入的字符个数，但遗憾的是<textarea />
元素却没有类似作用的属性。不过有时候我们还是会碰到需要限制<textarea />字符个数的
情况，比如说在网站上写求职简历做自我介绍的时候，就会限制你最多可以输入多少个字。
我们现在就来给<textarea />添加个maxlength属性，来模仿<input />元素的maxlength属性。
看下面的例子，一个类似填写简历的页面:
<html>
<head>
<title>我的简历</title>
<script type="text/javascript">
function isNotMax(oTextArea){
return oTextArea.value.length!=oTextArea.getAttribute("maxlength");
};
</script>
</head>
<body>
<form name="form1" action=" " method="post">
<p>基本信息</p>
姓名： <input type="text" size="16" maxlength="16"
name="txtName" /><br />
性别： <input type="radio" name="radSex" value="男"
checked>男
<input type="radio" name="radSex" value="女">女<br />
出生日期：<input type="text" size="16" name="txtBirthday" /><br />
联系电话：<input type="text" size="16" name="txtTel" /><br />
工作经历：（200字以内）<br />
<textarea rows="10" cols="70" name="txtArea1" id="txtArea1"
maxlength="200" onkeypress="return isNotMax(this)">
</textarea><br />
自我简介：（200字以内）<br />
<textarea rows="10" cols="70" name="txtArea2" id="txtArea2"
maxlength="200" onkeypress="return isNotMax(this)">
</textarea><br />
<input type="submit" name="submit" value="提交" />
</form>
</body>
</html>
<head>
<title>我的简历</title>
<script type="text/javascript">
function isNotMax(oTextArea){
return oTextArea.value.length!=oTextArea.getAttribute("maxlength");
};
</script>
</head>
<body>
<form name="form1" action=" " method="post">
<p>基本信息</p>
姓名： <input type="text" size="16" maxlength="16"
name="txtName" /><br />
性别： <input type="radio" name="radSex" value="男"
checked>男
<input type="radio" name="radSex" value="女">女<br />
出生日期：<input type="text" size="16" name="txtBirthday" /><br />
联系电话：<input type="text" size="16" name="txtTel" /><br />
工作经历：（200字以内）<br />
<textarea rows="10" cols="70" name="txtArea1" id="txtArea1"
maxlength="200" onkeypress="return isNotMax(this)">
</textarea><br />
自我简介：（200字以内）<br />
<textarea rows="10" cols="70" name="txtArea2" id="txtArea2"
maxlength="200" onkeypress="return isNotMax(this)">
</textarea><br />
<input type="submit" name="submit" value="提交" />
</form>
</body>
</html>
上面用到的方法很简单，给<textarea />元素添加个maxlength属性，每输入一个字符之前先
和maxlength的值进行比较，如果等于maxlength的值，那么isNotMax()函数就返回false;方法
的调用必须放在onkeypress事件处理函数中；因为keypress事件是在字符被插入到文本框之前
触发，如果达到了最大值，就返回false阻止字符的插入。
浙公网安备 33010602011771号