您的位置：首页 > 其它

控制文本框的字符个数，显示还可输入的字符数

2010-09-06 22:09 323 查看
控制文本框的字符个数，显示还可输入的字符数
<!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控件时才进行字符截取（该属性主要为了用户体验上的效果，没有该属性已经可以真正完成限制字符输入个数的任务）。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航