js 文本域限制输入的数据量

最新推荐文章于 2022-02-15 16:37:14 发布

最新推荐文章于 2022-02-15 16:37:14 发布 · 229 阅读

文章标签：

#HTML

本文介绍了一个简单的HTML页面，该页面使用JavaScript实现了一个留言字节数统计功能，能够实时显示用户输入内容所占用的字节数，并提醒用户留言的最大字节数限制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>

<BODY>
<SCRIPT language=JavaScript>

function CountStrByte(Message,Total,Used,Remain){ //字节统计
var LastCount =0;
var ByteCount = 0;
var StrValue = Message.value;
var StrLength = Message.value.length;
var MaxValue = Total.value;

if(LastCount != StrLength) { // 在此判断，减少循环次数
for (i=0;i<StrLength;i++){
ByteCount = (StrValue.charCodeAt(i)<=256) ? ByteCount + 1 : ByteCount + 2;
if (ByteCount>MaxValue) {
Message.value = StrValue.substring(0,i);
alert("留言内容最多不能超过 " +MaxValue+ " 个字节！\n注意：一个汉字为两字节。");
ByteCount = MaxValue;
break;
}
}
Used.value = ByteCount;
Remain.value = MaxValue - ByteCount;
LastCount = StrLength;
}
}
</SCRIPT>

<form action="" method="post" name="form1">
<table width="64%" border="1" align="center">
<tr>
<td width="16%" align="center">留言</td>
<td width="84%">
<textarea name="content" cols="50" rows="9" class="wenbenkuang" id="content" onkeydown="CountStrByte(this.form.content,this.form.total,this.form.used,this.form.remain);"
onkeyup="CountStrByte(this.form.content,this.form.total,this.form.used,this.form.remain);"></textarea></td>
</tr>
<tr>
<td align="center">字节</td>
<td>最多允许 <input name="total" type="text" disabled class="noborder" id="total" value="16" size="4">
个字节已用字节： <input name="used" type="text" disabled class="noborder" id="used" value="0" size="4">
剩余字节：<input name="remain" type="text" disabled class="noborder" id="remain" value="1600" size="4"></td>
</tr>
<tr>
<td colspan="2" align="center"><div id="bgclock"></div></td>
</tr>
</table>
</form>

</BODY>
</HTML>