textarea高度随内容自适应

时间:2021-09-12 14:25:29

最近遇到一个需求,视频名称初始有个生成值,并且支持可以手动修改,修改后名称过长后换行高度随内容增加。刚开始想到用input但是发现input不支持换行。后来用了textarea,用js来控制,下面是实现方式:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<textarea cols="30" style="height: 22px; width: 100px; padding: 3px 8px;" onkeyup="changeH(this)">视频</textarea>
<script src="https://cdn.bootcss.com/jquery/1.10.1/jquery.min.js"></script>
<script>
function changeH(arg) {
var target = $(arg)[0];
$(arg).innerHeight(target.scrollHeight
);
}
</script>
</body>
</html>

因为项目textarea有多条并且是自动生成的,所以用行内onkeyup,把this传到监听函数中,然后取得元素的原生对象,来获取scrollHeight,因为用jquery没有取到这个值。scrollHeight解释如下:

Element.scrollHeight 这个只读属性是一个元素内容高度的度量,包括由于溢出导致的视图中不可见内容。没有垂直滚动条的情况下,scrollHeight值与元素视图填充所有内容所需要的最小值clientHeight相同。包括元素的padding,但不包括元素的border和margin。scrollHeight也包括 ::before 和 ::after这样的伪元素。

scrollHeight即是textarea内容的高度(不包括padding,border,marin),然后用把这个值设置为这个对象的innerHeight(内容的高度,不包括padding,border,margin).即实现在手动输入textarea内容时设置其高度。实现textarea高度随内容自适应。