html之textarea标签的小用法（滚动条的位置决定数据结果的显示）

最新推荐文章于 2024-07-17 22:31:47 发布

程序yang

最新推荐文章于 2024-07-17 22:31:47 发布

阅读量830

点赞数 1

分类专栏：前端技术

本文链接：https://blog.csdn.net/weixin_44563573/article/details/102619165

版权

前端技术专栏收录该内容

17 篇文章 2 订阅

订阅专栏

先来看第一种，示例代码如下：

<html>
<body>
 
<textarea rows="10" cols="20" id="my"></textarea>
 
<button onClick="test()">test</button>
 
<script> 
	var i = 1;
	function test(){
		var obj = document.getElementById("my");
		obj.value += i + "\n";
		i++;
	}
</script>
 
</body>
</html>

效果图：
在这里插入图片描述
第二种，示例代码如下：

<html>
<body>
 
<textarea rows="10" cols="20" id="my"></textarea>
 
<button onClick="test()">test</button>
 
<script> 
	var i = 1;
	function test(){
		var obj = document.getElementById("my");
		obj.value += i + "\n";
		i++;
		obj.scrollTop = obj.scrollHeight;	//核心代码
	}
</script>
 
</body>
</html>

效果图：
在这里插入图片描述
不知道细心的你有没有发现两种写法导致的效果有什么不同？

总结：

第一种：新结果在尾部增加时，超出文本域的内容就看不见了。因为滚动条是在上面滚动的，并不是在底部，所以想要看到后面超出文本域的内容，就需要人手动去滚动或者拉滚动条才可以看到。
第二种：新结果在尾部增加时，超出文本域的内容会自动往上滚。因为滚动条是在底部滚动的，并不是在上面了，所以超出文本域的内容会自逐一显示，不需要人手动去滚动或者拉滚动条就可以看到了。