JS网页实现微博减字功能(文本框限制输入字数)

最新推荐文章于 2024-05-20 15:17:08 发布

weixin_75066187

最新推荐文章于 2024-05-20 15:17:08 发布

阅读量96

点赞数

文章标签： javascript 数学建模 servlet

本文链接：https://blog.csdn.net/weixin_75066187/article/details/130999682

版权

大家在一些软件和网页常常会看到的一个功能，就是输入框字数达到上限后，不能继续输入

当输入字数达到上限之后，可以看到文本框属于被锁定的状态

那么这样的功能该怎么实现呢？我们可以从两种方式来写

这里我们做了一个if判断，来判定剩余字数

<body>
		<textarea  cols="30" rows="10"></textarea>
		<span></span>
		<script>
			var ta=document.querySelector("textarea");
			var span =document.querySelector('span');
				
			ta.onkeydown =function(){
			
				length=40-ta.value.length;
				
				span.innerHTML="你还可以输入"+length+"个字符"
				if(length==0){//如果剩余可输入的字数为零，则文本框锁定
					ta.disabled=true;
				}
			}
			
			</script>
	</body>

还有一种更简单的方式，就是直接从HTML的代码进行修改，在文本框的标签下，加入一个maxlength

	<body>
		<textarea  cols="30" rows="10" maxlength="40"></textarea>
		<span></span>
		<script>
			var ta=document.querySelector("textarea");
			var span =document.querySelector('span');
				
			ta.onkeydown =function(){
			
				length=40-ta.value.length;
				
				span.innerHTML="你还可以输入"+length+"个字符"
				// if(length==0){//如果剩余可输入的字数为零，则文本框锁定
				// 	ta.disabled=true;
				// }
			}
			
			</script>
	</body>

两种方法中，我任务是第二种方法更好，代码简洁，而且第一种文本框锁定后，不能删除原本的字

比较鸡肋

weixin_75066187

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS网页实现微博减字功能(文本框限制输入字数)

还有一种更简单的方式，就是直接从HTML的代码进行修改，在文本框的标签下，加入一个maxlength。两种方法中，我任务是第二种方法更好，代码简洁，而且第一种文本框锁定后，不能删除原本的字。大家在一些软件和网页常常会看到的一个功能，就是输入框字数达到上限后，不能继续输入。当输入字数达到上限之后，可以看到文本框属于被锁定的状态。那么这样的功能该怎么实现呢？我们可以从两种方式来写。这里我们做了一个if判断，来判定剩余字数。
复制链接

扫一扫