JS监听键盘事件，并计算textarea内容长度

最新推荐文章于 2023-10-24 15:42:44 发布

自豪听我的

最新推荐文章于 2023-10-24 15:42:44 发布

阅读量346

点赞数

分类专栏： js监听事件文章标签： js

本文链接：https://blog.csdn.net/xyy_x_xyy/article/details/116462670

版权

js监听事件专栏收录该内容

4 篇文章 0 订阅

订阅专栏

使用onkeyup事件监听输入框内容长度，并显示在页面

效果展示

在这里插入图片描述
2. 代码展示

<!DOCTYPE html>
<html>
    <head lang="en">
	    <meta charset="UTF-8">
	    <title>输入文本</title>
	</head>
	<body>
		<p>字数限制在30字内，<span><span id="be">您还可以输入</span><b id='num'>30</b>字</span></p>
		<textarea cols="50"  rows="7"  id="text"></textarea>
		<script type="text/javascript">
			//补充代码
			var text = document.getElementById('text');
			var num = document.getElementById('num');
			var be = document.getElementById('be');			
			text.onkeyup = function(){
				var val = text.value;
				var len = val.length;
				num.innerHTML = 30-len;
				if(num.innerHTML<=0){
					num.innerHTML = len-30;
					be.innerHTML = '您已超出';
				}else{
					num.innerHTML = 30-len;
					be.innerHTML = '您还可以输入';
				}
			}
			
		</script>
	</body>
</html>