Barret Lee Home
facebook send mail to barret sina weibo
share

textarea高度自适应edit

日期:2014-12-04

作者: Barret Lee

问题: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";

这里需要注意的是:

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

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

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

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

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

标签: 问答 textarea 自适应
上一篇:数据交给谁来解析,前端还是后端?
下一篇:gulp打包压缩css遇到的坑