javascript textarea字数限制

1.这一个是读取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>

2.下面的这段代码，直接计算文档的长度

<!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" onblur="Chck();" /> 
<input type="button" value="计算" onclick="Chck();" /> 
</div> 
</form> 
</body> 
</html>

3.下面的这段代码是网络上应用比较广泛的，有剩余字数提示的效果代码，推荐

<!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>

 

posted @ 2012-09-03 09:26  小木v587  阅读(252)  评论(0)    收藏  举报