1. 程式人生 > >textarea文字域自適應高度

textarea文字域自適應高度

轉載自:http://www.wangshizhao.cn/textareaef6ncg0x.html

在作為留言或者其他的網站備註的地方都是用的textarea,但是當文字多過其高度的時候,前面的文字就被頂到上面去了,要看內容還要翻上去。

當有了這個就不需要了,因為他會自動增加高度,適應當前的文字高度。

方法其實很簡單,建議以後模板的作者可以加上。

1.引入Jquery.

<script id="jquery_183" type="text/javascript" class="library" src="/js/sandbox/jquery/jquery-1.8.3.min.js"></script>

2.引入初始css.

body { background:#fff; }

textarea {width:300px; min-height:60px; overflow:hidden;}

3.加入自適應的JS

$.fn.autoHeight = function(){
    
    function autoHeight(elem){
        elem.style.height = 'auto';
        elem.scrollTop = 0; //防抖動
        elem.style.height = elem.scrollHeight + 'px';
    }
    
    this.each(function(){
        autoHeight(this);
        $(this).on('keyup', function(){
            autoHeight(this);
        });
    });
 
}
    
    
$('textarea[autoHeight]').autoHeight();

4.加入textarea

<div><textarea autoHeight="true">textarea</textarea></div>