以前、JavaScript を使用してテキストエリアの高さをコンテンツに応じて適応的に拡大および縮小できるように制御したことを共有しましたが、今日は実装方法を変更してそれを要約するために時間を費やしました
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();
});
この記事で説明した内容は以上です。jQuery を学習する皆さんのお役に立てれば幸いです。