textarea标签自适应宽度和高度

最新推荐文章于 2024-08-18 16:45:25 发布

许一世承诺

最新推荐文章于 2024-08-18 16:45:25 发布

阅读量3.8k

点赞数 1

文章标签： textarea自适应宽高 js html

本文链接：https://blog.csdn.net/sinat_36978723/article/details/53535100

版权

textarea当做输入框可以解析空格和回车，当我们使用textarea展示内容的时候我们希望textarea的宽高可以根据内容自适应而不是定死的像素。

下面是代码：

var arr = $(this).scroll().context.value.split("\n");    //获取内容切割回车存到arr中
var l = 0,h = 0;
for(var i in arr){
    (arr[i].length > l) && (l = arr[i].length);           //获取最长的一串字符
}
$(this).css({"width":(l * 12) + "px","maxWidth":(maxWidth / 2) + "px"});      //宽度设为最长的字符个数*字体大小  并设置一个最大宽度（为了内容没有换行的时候强制换行）
var h = $(this).scroll().context.scrollHeight;            //获取textarea视口的高度
$(this).css({"height":h + "px"});                         //设置textarea高度