如何在javascript中更改像facebook这样的文本区域的高度?

时间:2013-12-12 15:29:38

标签: html facebook comments textarea

我正在像Facebook一样评论文字区域。我试过通过计算cols和值的长度来做到这一点。但是符号(“l”或“a”)的大小不同。如何在javascript中使用Facebook等文本区域而不使用任何插件? 我的代码是这样的:

<textarea cols="50" rows="1" onkeydown="comChangeHeight(this);"></textarea>
<script type="text/javascript">
function comChangeHeight(obj) {
    var id = obj.id;
    var length - obj.value.length;
    obj.rows = Math.ceil(length / obj.cols);
}
</script>

1 个答案:

答案 0 :(得分:2)

我写了这段代码:

window.onload = function() {
    var t = document.getElementsByTagName('textarea')[0];
    var offset= !window.opera ? (t.offsetHeight - t.clientHeight) : (t.offsetHeight + parseInt(window.getComputedStyle(t, null).getPropertyValue('border-top-width'))) ;

    var resize  = function(t) {
        t.style.height = 'auto';
        t.style.height = (t.scrollHeight  + offset ) + 'px';    
    }

    t.addEventListener && t.addEventListener('input', function(event) {
        resize(t);
    });

    t['attachEvent']  && t.attachEvent('onkeyup', function() {
        resize(t);
    });
}

我认为它也有助于其他人。