Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

加筆修正しました。

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)

SoundRabbit
20歳JD(情報理工学域大学生)です。Webプログラマー(笑)をしています。符号化理論とかコンピュータアーキテクチャとかを勉強しています。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした