share

textarea高度自适应edit

问题：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 的页面，打开控制台，输入字符，验证下吧~