控制文本框的字符个数，显示还可输入的字符数
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>控制textarea的字符个数</title>
<script language="javascript">
function LessThan(oTextArea){
//获得textarea的maxlength属性
var num=oTextArea.getAttribute("maxlength")-oTextArea.value.length
document.getElementById("txtNum").innerHTML="还可输入的字符数："+num;
//返回文本框字符个数是否符号要求的boolean值
return oTextArea.value.length < oTextArea.getAttribute("maxlength");
}
</script>
</head>
<body>
<form method="post" name="myForm1">
请输入您的姓名:
<input type="text" name="name" id="name" class="txt" value="姓名" maxlength="10"><br>
我要留言<br>
<textarea name="comments" id="comments" cols="40" rows="4" maxlength="50" onkeypress="return LessThan(this);" onchange="return LessThan(this);" onpropertychange="return LessThan(this);">
</textarea><span id="txtNum"></span><br>
<input type="submit" name="btnSubmit" id="btnSubmit" value="Submit" class="btn">
<input type="reset" name="btnReset" id="btnReset" value="Reset" class="btn">
</form>
</body>
</html>
说明：
1、onkeydown监控用户键盘输入并进行字符截取；
2、onchange防止用户通过复制粘贴功能输入超过指定最大字符数的字符；
3、onpropertychange针对IE（FF中无效），作用就是当用户通过复制粘贴功能来进行输入时，当粘贴完成的瞬间即进行字符截取，而不是像onchange那样需要等到焦点离开textarea控件时才进行字符截取（该属性主要为了用户体验上的效果，没有该属性已经可以真正完成限制字符输入个数的任务）。
扫一扫
2744
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
