textarea高度自适应

问题:textarea数据是数据库直接输出填充,请问如何做到自适应?

回答:

var tt = document.getElementsByTagName("textarea").item(0),
    len = tt.value.length,
    width = tt.clientWidth,
    style = (window.getComputedStyle
                ||function(a){return a.currentStyle})(tt, null),
    fs = parseInt(style['font-size']) || 12,
    lh = parseInt(style['line-height']) || fs * 1.2;

tt.style.height = Math.ceil(len / (width / fs)) * lh + "px";

这里需要注意的是:

  • line-height 可能是 normal/inherit 之类的值,所以最好加上一个默认值
  • 上面算法适合等宽字体
  • 防止计算误差,使用 Math.ceil 函数,比较靠谱的方式是 Math.ceil(len / (width / fs) - 1),可以少一行~

当然,最简单的方式莫过于:

tt.onpropertychange = tt.oninput = function(){
    this.style.height = this.scrollHeight;
};

虽然 css 也可以做到,但效果并不是很好:

.tt {
    overflow-x: hide;
    overflow-y: visible;
    width: 300px;
}

找个有 textarea 的页面,打开控制台,输入字符,验证下吧~

全部评论

相关推荐

06-26 17:24
已编辑
宁波大学 golang
迷失西雅图:别给,纯kpi,别问我为什么知道
点赞 评论 收藏
分享
05-26 10:24
门头沟学院 Java
qq乃乃好喝到咩噗茶:其实是对的,线上面试容易被人当野怪刷了
找工作时遇到的神仙HR
点赞 评论 收藏
分享
不愿透露姓名的神秘牛友
昨天 17:10
点赞 评论 收藏
分享
评论
点赞
收藏
分享

创作者周榜

更多
牛客网
牛客网在线编程
牛客网题解
牛客企业服务