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)