当前位置:首页 > JavaScript学习笔记5–限制textarea的字符数

JavaScript学习笔记5–限制textarea的字符数

点击次数:1572  更新日期:2011-01-05
\n


\n

<input />元素可以通过maxlength属性限制允许输入的字符个数,但遗憾的是<textarea />
元素却没有类似作用的属性。不过有时候我们还是会碰到需要限制<textarea />字符个数的
情况,比如说在网站上写求职简历做自我介绍的时候,就会限制你最多可以输入多少个字。
我们现在就来给<textarea />添加个maxlength属性,来模仿<input />元素的maxlength属性。
看下面的例子,一个类似填写简历的页面:


\n


\n

<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>
姓名:&nbsp;&nbsp;&nbsp;&nbsp;<input type=”text” size=”16″ maxlength=”16″
name=”txtName” /><br />
性别:&nbsp;&nbsp;&nbsp;&nbsp;<input type=”radio” name=”radSex” value=”男”
checked>男&nbsp;
<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>


\n


\n

上面用到的方法很简单,给<textarea />元素添加个maxlength属性,每输入一个字符之前先
和maxlength的值进行比较,如果等于maxlength的值,那么isNotMax()函数就返回false;方法
的调用必须放在onkeypress事件处理函数中;因为keypress事件是在字符被插入到文本框之前
触发,如果达到了最大值,就返回false阻止字符的插入。


\n

\n