LoginSignup
0

More than 5 years have passed since last update.

jQueryを用いずにtextareaの大きさを動的に拡張する

Last updated at Posted at 2017-09-17

加筆修正しました。

textareaの大きさを動的に拡張しようとしたら、jQueryを使わなくても思いの外簡単にできてしまったので、自分用メモも兼ねて。実は、公開することでバグを見つけてもらおう、なんて思っていたり……

ソースコード(JavaScript)

引数には、大きさを変更したいtextareaのelementを渡します。keyupなりkeypressなりで呼び出せば良いです。

function ReSize(target) {
    //targetのbox-sizingがborder-boxかcontent-boxか
    if (window.getComputedStyle(target).boxSizing == "border-box") {
        //box-sizingの場合
        //scrollHeightにborderとmarginの大きさを加える
        target.style.height = target.scrollHeight + (target.offsetHeight - target.clientHeight) + "px";
    } else {
        //content-boxの場合
        //上下のpaddingの大きさを計算
        var padding = parseInt(window.getComputedStyle(target).paddingTop) + 
            parseInt(window.getComputedStyle(target).paddingBottom);
        //scrollHeightから上下のpaddingの大きさを引く
        target.style.height = target.scrollHeight - padding + "px";
    }
}

ソースコードについて

textareaのbox-sizingに応じて高さの計算方法を変えています。

box-sizing:border-boxの場合

target.scrollHeightに上下のborderとmarginの大きさを加えています。その大きさはtarget.offsetHeight - target.clientHeightで求めています。

box-sizing:content-boxの場合(elseの方)

target.scrollHeightから上下のpaddingの大きさを引いています。その大きさはparseInt(window.getComputedStyle(textarea).paddingTop) + parseInt(window.getComputedStyle(textarea).paddingBottom)で求めています。長かったのでpaddingに一旦保存してしまいました。(parseFloatの方が良いかも…… 今のところ、私はparseIntで問題が発生していませんが。)

動作確認について

Chrome60.0.3112.113及びMicrosoft Edge 40.15063.0.0で確認しました。

訂正

jQueryのスペルに誤りがあったため、修正しました。(2017/09/17)
変数名に誤りがあったため、修正しました。(2017/09/17)
ソースコードにコメントを追加しました。(2017/09/17)

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0