html textarea文本域高度自适应

最新推荐文章于 2023-04-11 18:08:24 发布

System.out.print

最新推荐文章于 2023-04-11 18:08:24 发布

阅读量1.1k

点赞数

分类专栏：前端文章标签： html 文本域高度自适应文本域前端

本文链接：https://blog.csdn.net/weixin_40841731/article/details/87905430

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

1、可直接在菜鸟教程网站测试页面中测试

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
	<title>菜鸟教程(runoob.com)</title>
</head>
<body>
	<textarea style="width: 200px;padding:0px;"
		  id="symptomTxt"
		  oninput="autoTextAreaHeight(this)"
         >
	</textarea>
</body>
<script type="text/javascript">	
	//文本域自适应
 	function autoTextAreaHeight(o) {
	    o.style.height = o.scrollTop + o.scrollHeight + "px";
	} 
	$(function () {
	    var ele = document.getElementById("symptomTxt");
	    autoTextAreaHeight(ele);
	}) 
</script>
</html>

2、其实这个段代码有些小瑕疵，输入的时候，高度自适应，但是足字删除输入的内容时，高度就不自适应了

本人改进办法，由于时间仓促，可能不是很好，如果你有好的方式，可以告诉我，在这里谢谢了。

解决：因为文本域宽度200px，测试了下，每行能输入15个汉字，length长度为30。所以我监听输入的长度，当大于30时就追加文本域高度。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
	<title>菜鸟教程(runoob.com)</title>
</head>
<body>
	<textarea style="width: 200px;padding:0px;"
		  id="symptomTxt"
		  oninput="autoTextAreaHeight(this)"
         >
	</textarea>
</body>
<script type="text/javascript">	
	//获取文本长度，一个汉字长度为2
	var strLength = {};
	strLength.GetLength = function(str) {
	  return str.replace(/[\u0391-\uFFE5]/g,"aa").length;  //先把中文替换成两个字节的英文，在计算长度
	};
	//文本域自适应
 	function autoTextAreaHeight(o) {
		var element = $(o).val();
		var len = strLength.GetLength(element);
		var rows = Math.ceil(len/30); 
		o.style.height = o.scrollTop + 30 + (rows>0?rows-1:rows)*10 + "px";
	    //o.style.height = o.scrollTop + o.scrollHeight + "px";
	} 
	$(function () {
	    var ele = document.getElementById("symptomTxt");
	    autoTextAreaHeight(ele);
	}) 
</script>
</html>

System.out.print

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
html textarea文本域高度自适应

1、可直接在菜鸟教程网站测试页面中测试&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"&gt;&lt;/script&gt; &amp
复制链接

扫一扫