jquery實(shí)現(xiàn)textarea 高度自適應(yīng)

更新時(shí)間：2015年03月11日 08:55:45 投稿：hebedich

用jquery實(shí)現(xiàn)的textarea 高度自適應(yīng)代碼。這個(gè)動(dòng)畫效果比較流暢。適合新手學(xué)習(xí)。非常簡單實(shí)用，這里推薦給小伙伴們。

之前給大家分享過用Javascript控制文本框textarea高度隨內(nèi)容自適應(yīng)增長收縮，今天花了點(diǎn)時(shí)間換了種實(shí)現(xiàn)方法，總結(jié)一下

jQuery.fn.extend({

            autoHeight: function(){

                return this.each(function(){

                    var $this = jQuery(this);

                    if( !$this.attr('_initAdjustHeight') ){

                        $this.attr('_initAdjustHeight', $this.outerHeight());

                    }

                    _adjustH(this).on('input', function(){

                        _adjustH(this);

                    });

                });

                /**

                 * 重置高度 

                 * @param {Object} elem

                 */

                function _adjustH(elem){

                    var $obj = jQuery(elem);

                    return $obj.css({height: $obj.attr('_initAdjustHeight'), 'overflow-y': 'hidden'})

                            .height( elem.scrollHeight );

                }

            }

        });

        // 使用

        $(function(){

            $('textarea').autoHeight();

        });

以上就是本文所述的全部內(nèi)容了，希望對大家學(xué)習(xí)jQuery能夠有所幫助。

您可能感興趣的文章:

相關(guān)文章

jquery+ajaxform+springboot控件實(shí)現(xiàn)數(shù)據(jù)更新功能
這篇文章主要介紹了jquery+ajaxform+springboot控件實(shí)現(xiàn)數(shù)據(jù)更新操作,使用jquery的ajaxform插件是一個(gè)比較不錯(cuò)的選擇。具體實(shí)現(xiàn)工程大家參考下本文
2018-01-01
基于jQuery的遍歷同id元素并響應(yīng)事件的代碼
寫網(wǎng)頁的時(shí)候，腳本循環(huán)的時(shí)候有很多時(shí)候都會(huì)循環(huán)出來同id的網(wǎng)頁元素，下面貼出來代碼，如何利用jQuery對這些元素進(jìn)行逐一遍歷并可響應(yīng)消息
2012-06-06
jquery 實(shí)現(xiàn)復(fù)選框的全選操作實(shí)例代碼
這篇文章主要介紹了jquery 實(shí)現(xiàn)復(fù)選框的全選操作實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下
2017-01-01
jquery ajaxfileuplod 上傳文件 essyui laoding 效果【防止重復(fù)上傳文件】
點(diǎn)擊一次上傳, 當(dāng)上傳操作結(jié)束后才能操作界面，實(shí)現(xiàn)方式是通過 ajaxfileuplod 上傳文件，需要的朋友參考下吧
2018-05-05
Jquery讓form表單異步提交代碼實(shí)現(xiàn)
這篇文章主要介紹了Jquery讓form表單異步提交代碼實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2019-11-11
實(shí)例詳解jQuery的無new構(gòu)建
這篇文章運(yùn)用實(shí)例介紹了jQuery的無new構(gòu)建，小編感覺介紹的非常詳細(xì)，具有參考借鑒價(jià)值，感興趣的朋友一起學(xué)習(xí)吧。
2016-08-08
instanceof和typeof運(yùn)算符的區(qū)別詳解
兩個(gè)運(yùn)算符雖然比較相似，其實(shí)區(qū)別還是非常大的，雖然不難區(qū)別，但是對于初學(xué)者可能稍有困擾，下面就簡單介紹一下它們兩者的區(qū)別，希望對需要的朋友有所幫助
2014-01-01
jQuery 選擇方法及$(this)用法實(shí)例分析
這篇文章主要介紹了jQuery 選擇方法及$(this)用法,結(jié)合實(shí)例形式分析了jQuery 選擇方法及$(this)相關(guān)使用技巧與注意事項(xiàng),需要的朋友可以參考下
2020-05-05
Jquery揭秘系列:ajax原生js實(shí)現(xiàn)詳解(推薦)
下面小編就為大家?guī)硪黄狫query揭秘系列:ajax原生js實(shí)現(xiàn)詳解(推薦)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-06-06
jquery遍歷篩選數(shù)組的幾種方法和遍歷解析json對象
本文為大家介紹下jquery遍歷篩選數(shù)組的幾種方法和遍歷解析json對象的具體實(shí)現(xiàn)，感興趣的朋友不要錯(cuò)過
2013-12-12