Text文本框输入时，后面跟一个动态的数字计数，实现输入限制

原创于 2022-01-18 17:59:26 发布 · 450 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

当前文章被以下社区和专栏收录：

本文介绍了一种使用JavaScript实现的输入框字符长度限制及实时显示已输入字符数的方法。通过设置最大输入长度并在用户输入时即时更新字符计数，提高了用户体验。文中详细解释了如何利用HTML与JavaScript结合完成这一功能。

<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div>
			内容
			<input type="text" id="i" onkeyup="myFunction()"/>
			<span id="size">0</span>/<span id="maxSize">0</span>
		</div>
	</body>```
```javascript
<script>
		//新人不太会写，记录一下，不对的请大佬们指点
		//定义一个最大输入值
		var maxLength = "5"
	
		window.onload = function() {
			var maxSize=document.getElementById("maxSize");
			maxSize.innerText = maxLength;
			
			var i=document.getElementById("i");
			i.setAttribute("maxlength", maxLength);
		}
		//键入之后释放时的事件
		function myFunction() {
			var length = document.getElementById("i").value.length;
			if (length <= maxLength) {
				size.innerText = length;
			}
		}
	</script>