限制多行文本域输入的字符个数

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

xdwangiflytek

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

阅读量395

点赞数

分类专栏： Js/jQuery 文章标签：限制多行文本域输入的字符个数

本文链接：https://blog.csdn.net/xdwangiflytek/article/details/84128638

版权

Js/jQuery 专栏收录该内容

34 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>限制多行文本域输入的字符个数</title>
<script language=JavaScript>
	var LastCount = 0;
	function CountStrByte(Message, maxs, Used, Remain) { //字节统计  
		var ByteCount = 0;
		var StrValue = Message.value;
		var StrLength = Message.value.length;
		var maxsValue = maxs.value;
		if (LastCount != StrLength) { // 在此判断，减少循环次数  
			for (i = 0; i < StrLength; i++) {
				ByteCount = (StrValue.charCodeAt(i) <= 256) ? ByteCount + 1
						: ByteCount + 2;
				if (ByteCount > maxsValue) {
					Message.value = StrValue.substring(0, i);
					alert("留言内容最多不能超过 " + maxsValue + " 个字节！\n注意：一个汉字为两字节。");
					ByteCount = maxsValue;
					break;
				}
			}
			Used.value = ByteCount;
			Remain.value = maxsValue - ByteCount;
			LastCount = StrLength;
		}
	}
</script>
</head>
<body>
	<form action="">
		<textarea name="content" cols="50" rows="9" class="wenbenkuang"
			id="content"
			οnkeydοwn="CountStrByte(this.form.content,this.form.total,this.form.used,this.form.remain);"
			οnkeyup="CountStrByte(this.form.content,this.form.total,this.form.used,this.form.remain);"></textarea>
		<br /> <br /> 最多允许 <input name="total" type="text" disabled
			class="noborder" id="total" value="1600" size="4"> 个字节
		已用字节：&nbsp; <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">
	</form>

</body>
</html>

运行效果：

xdwangiflytek

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
限制多行文本域输入的字符个数

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;&lt;html&gt;&lt;head&gt;&lt;meta http-equiv="Content-Type" content="text/htm
复制链接

扫一扫