网页中经常会用到的一些字数限制要求，下面的代码应该可以帮你解决这个问题,下面的代码不论是text和textarea效果都是一样的。
这一个是读取textarea的maxlength属性的值，进行计算，思路很好，但修改起来就麻烦啊，不过对于js爱好者来说是个不错的参考，通过读取属性值进行控制。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
<title>textarea字数限制 练习代码多有参考网络 by ahuinan</title>
<script language="JavaScript" type="text/javascript">
var TextUtil = new Object();
TextUtil.NotMax = function(oTextArea){
var maxText = oTextArea.getAttribute("maxlength");
if(oTextArea.value.length > maxText){
oTextArea.value = oTextArea.value.substring(0,maxText);
alert("超出限制");
}
}
</script>
</head>
<body>
<textarea rows="10" cols="60" onpropertychange="TextUtil.NotMax(this)" maxlength="3"></textarea>
</body>
</html>
下面的这段代码，直接计算文档的长度
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>input 字数限制</title>
<script type="text/javascript" language="javascript">
function Chck()
{
var len = 0;
var str=document.getElementById("input1").value;
for (var i=0; i<str.length; i++)
{
if (str.charCodeAt(i)>127 || str.charCodeAt(i)==94) {
len += 2;
} else {
len ++;
}
}
alert(len);
if(len>20)
{
alert("对不起，不能大于20个字节，中文算两个！");
}
}
</script>
</head>
<body>
<form id="form1">
<div>
<input id="input1" type="text" οnblur="Chck();" />
<input type="button" value="计算" οnclick="Chck();" />
</div>
</form>
</body>
</html>
下面的这段代码是网络上应用比较广泛的，有剩余字数提示的效果代码，推荐
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="robots" content="all" />
<title>JS限制textarea输入框输入字数</title>
<SCRIPT language="javascript">
<!--
function checktext(text)
{
allValid = true;
for (i = 0; i < text.length; i++)
{
if (text.charAt(i) != " ")
{
allValid = false;
break;
}
}
return allValid;
}
function gbcount(message,total,used,remain)
{
var max;
max = total.value;
if (message.value.length > max) {
message.value = message.value.substring(0,max);
used.value = max;
remain.value = 0;
alert("留言不能超过 200 个字!");
}
else {
used.value = message.value.length;
remain.value = max - used.value;
}
}
-->
</script>
<style type="text/css">
<!--
* {padding:0; margin:0;}
body, html {text-align:left; font-size:12px; line-height:150%; margin:0 auto; background:#fff; padding-top:20px;}
fieldset {padding:10px; width:550px; margin:0 auto;}
legend {font-size:14px; font-weight:bold;}
.inputtext {border:none; background:#fff;}
-->
</style>
</head>
<body>
<form action="SaveData.asp" method="post" onSubmit="return datacheck();">
<fieldset><legend>请输入内容</legend>
<textarea name="Memo" rows="10" wrap=PHYSICAL cols="75" onKeyDown="gbcount(this.form.Memo,this.form.total,this.form.used,this.form.remain);" onKeyUp="gbcount(this.form.Memo,this.form.total,this.form.used,this.form.remain);"></textarea>
<p>最多字数：
<input disabled maxLength="4" name="total" size="3" value="200" class="inputtext">
已用字数：
<input disabled maxLength="4" name="used" size="3" value="0" class="inputtext">
剩余字数：
<input disabled maxLength="4" name="remain" size="3" value="200" class="inputtext"></td>
</p>
</fieldset>
</form>
</body>
</html>
102
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
