用JS scrollHeight方法实现textarea输入高度自适应的方法

最新推荐文章于 2024-10-14 17:30:36 发布

转载最新推荐文章于 2024-10-14 17:30:36 发布 · 4.9k 阅读

前端开发专栏收录该内容

8 篇文章

订阅专栏

本文介绍了一种解决HTML textarea元素在不同浏览器下实现自适应高度的方法。通过模拟div元素来准确获取文本区域的高度，并确保在Firefox和Internet Explorer等浏览器中的兼容性。

HTML源代码部分：

<textarea id="content" name="content" οnkeyup="autosize(this); checkSupply(4000,'content');" default_height="94">{$answer['content']}</textarea>

/*html中focus函数也经过测试不好使。*/

//textarea高度自适应

function autosize(obj) {
    var d_h = parseInt(obj.attributes['default_height'].value);
    if(obj.scrollHeight > d_h) {
        alert(obj.scrollHeight);
        obj.style.height = obj.scrollHeight + 'px';
    } else {
        obj.style.height = d_h + 'px';
    }

}

这个方法适应FF。

但有一个BUG。在IE浏览器下面，scrollHeight值有偏差它的scrollHeight会莫名奇妙地多出一些，看起来非常奇怪。。

一直在网上寻找解决方案无果。

最后经一位大神提醒，修改了一下解决方案。。

首先模拟一个DIV。获取textarea内容，实时赋值给这个DIV。然后取它的高度再将其高度给textarea

html部分：

首先模拟一个DIV。获取textarea内容，实时赋值给这个DIV。取它的高度再将其高度给textarea
function autosize(obj) {
    var d_h = parseInt($('#'+obj).attr('default_height'));
    var mnDiv ='<div class="mnDiv"></div>';
    $('.mnDiv').remove();
    $('#'+obj).after(mnDiv);
    $('.mnDiv').css({width:$('#'+obj).width(),display:"none"}).html('<pre>'+$('#'+obj).val()+'</pre>');//填充内容
    var mnDivHeight =$('.mnDiv').height();

    if(mnDivHeight > d_h) {
//        alert($('#'+obj)[0].scrollHeight);
        $('#'+obj).css({'height':mnDivHeight,'padding-top':'20px'});
    } else {
        $('#'+obj).css({'height':d_h});
    }
}