html 计算已输入字数和剩余字数

最新推荐文章于 2024-08-09 15:51:34 发布

sinolzeng

最新推荐文章于 2024-08-09 15:51:34 发布

阅读量4.1k

点赞数

分类专栏： Javascript 文章标签： html javascript

本文链接：https://blog.csdn.net/sinolzeng/article/details/39476763

版权

Javascript 专栏收录该内容

95 篇文章 1 订阅

订阅专栏

<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
<meta name="robots" content="all" />  
<meta name="author" content="" />  
<meta name="Copyright" content="" />  
<meta name="keywords" content="" />  
<meta name="description" content="JS限制textarea输入框输入字数" />  
<title>JS统计还可以输入多少字数，用于向输入者提示信息</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) {   
messagemessage.value = message.value.substring(0,max);   
used.value = max;   
remain.value = 0;   
<!-- alert("留言不能超过 200 个字!");-->  
alert("不能超过"+total.value+"个字!");   
}   
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" >  
<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="10" class="inputtext">  
已用字数：   
<input disabled maxLength="4" name="used" size="3" value="0" class="inputtext">  
剩余字数：   
<input disabled maxLength="4" name="remain" size="3" value="10" class="inputtext"></td>  
</p>  
</fieldset>  
</form>  
</body>  
</html>

展示如下：