textareaの自動サイズ変更

入力内容の量に応じたtextareaの自動サイズ変更

出典:入力内容の量に応じたtextareaの自動サイズ変更 – Qiita
//jquery使うバージョン

$("#ta").height(30);//init
$("#ta").css("lineHeight","20px");//init

$("#ta").on("input",function(evt){
    if(evt.target.scrollHeight > evt.target.offsetHeight){   
        $(evt.target).height(evt.target.scrollHeight);
    }else{          
        var lineHeight = Number($(evt.target).css("lineHeight").split("px")[0]);
        while (true){
            $(evt.target).height($(evt.target).height() - lineHeight); 
            if(evt.target.scrollHeight > evt.target.offsetHeight){
                $(evt.target).height(evt.target.scrollHeight);
                break;
            }
        }
    }
});

逆に、scrollHeightの方がoffsetHeightよりも小さい、あるいは同じ場合には、heightを減らしていきます。textareaのheightを1ラインずつ減らしていき、scrollHeightがoffsetHeightよりも大きくなったところでheightをscrollHeightに合わせるようにします。

なぜこんなことをしているかというと、offsetHeightからはみ出させないと、scrollHeightを入力内容の大きさとして扱えないからです。textarea内全ての入力内容がスクロールすることなく見えている場合、scrollHeightはclientHeightと同じ値をとってしまいます。

JavaScriptによる要素サイズの取得

出典:jQuery・JavaScript 高さ、横幅取得方法 – Qiita
var h = element.clientHeight;

clientHeight paddingを含んだ高さ
scrollHeight paddingを含んだ画面上に表示されていないコンテンツを含む高さ
offsetHeight border、padding、スクロールバーを含んだ高さ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です