本文介绍如何利用JavaScript监听textarea的onKeyDown和onKeyUp事件，实现输入字符串的字符数限制。通过textCounter函数，当输入超过最大限制时自动截取，并实时更新剩余可输入字符数显示。
HTML结构设计与事件绑定
在HTML结构中，首先定义一个textarea元素用于接收用户输入的短信内容。该元素设置了name为message，并指定了cols和rows属性以调整显示大小。关键之处在于为textarea绑定了onKeyDown和onKeyUp两个事件，分别调用textCounter函数，传入textarea对象、显示剩余字符数的输入框对象以及最大允许字符数65。同时，页面下方包含一个只读的input框，用于展示当前剩余可输入的字符数量，初始值设为65，并提示每条短信最大允许输入65个字符。
<table>
<tr>
<td width="150">短信内容：</td>
<td>
<textarea name="message" cols="96" rows="5" onKeyDown="textCounter(message,remLen,65);"
onKeyUp="textCounter(message,remLen,65);"></textarea>
<td>
</tr>
<tr><td></td>
<td>您还可以输入:<input name="remLen" type="text" value="65" size="5" readonly="readonly">个字符,每条短信最大允许输入<strong>65</strong>个字符</td>
</tr>
</table>JavaScript字符限制逻辑实现
在JavaScript中，定义textCounter函数来处理字符限制逻辑。该函数接收三个参数：field（textarea元素）、countfield（显示剩余字符数的input元素）和maxlimit（最大字符限制）。函数首先检查textarea中当前值的长度是否超过maxlimit。如果超过，则使用substring方法截取前maxlimit个字符，从而限制输入长度；如果未超过，则计算剩余可用字符数（maxlimit减去当前value长度），并将结果赋值给countfield的value，实现剩余字符数的实时更新。
<script>
function textCounter(field, countfield, maxlimit) {
if (field.value.length > maxlimit)
field.value = field.value.substring(0, maxlimit);
else
countfield.value = maxlimit - field.value.length;
}
</script>