动态显示textarea中输入的字数

最新推荐文章于 2022-11-14 13:39:17 发布

pengpeng11

最新推荐文章于 2022-11-14 13:39:17 发布

阅读量147

点赞数

分类专栏： javaScript 文章标签： HTML

本文链接：https://blog.csdn.net/pengpeng11/article/details/83531156

版权

javaScript 专栏收录该内容

11 篇文章 0 订阅

订阅专栏


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="robots" content="all" />
<meta name="keywords" content="JS,Blog,ASP,designing,with,web,standards,xhtml,css,graphic,design,layout,usability,accessibility,w3c,w3,w3cn" />
<meta name="descrīption" content="JS限制textarea输入框输入字数" />
<title>JS限制textarea输入框输入字数</title>
<script type="text/javascript">

function checktext(text)
{
  allValid = true;
  for (i = 0;  i < text.length;  i++)
  {
   if (text.charAt(i) != " ")
   {
    allValid = false;
    break;
   }
  }
return allValid;
}

function xx(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="xx(this.form.Memo,this.form.total,this.form.used,this.form.remain);" onKeyUp="xx(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>