JS统计可输入剩余字数，用于向输入者提示信息

转载已于 2022-03-21 21:06:48 修改 · 464 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://blog.youkuaiyun.com/gjpdeyx/article/details/5712215

文章标签：

#javascript

于 2022-03-20 12:06:26 首次发布

JavaScript 专栏收录该内容

29 篇文章

订阅专栏

这篇博客介绍了一个JavaScript函数，用于实时统计textarea输入框内的剩余字数，当输入超过预设最大值时，会触发警告提示。该功能有助于用户在填写内容时了解自己的输入限制，防止超字。

JS统计可输入剩余字数，用于向输入者提示信息_gjpdeyx的博客-优快云博客

<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) {
message.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>