困ったこと
テキストエリアの高さを、入力された内容に応じて高さを自動でフィットさせたくて、色々ためしていました。要は、スクロールさせたくなかったんです。
スマホで入力するときにすごく面倒だから。画面のスクロールとテキストエリアのスクロールが平行しちゃうから、どうしてもやりにくい。
作ることに。
ひとまず、ページを読み込んだ時点で自動で高さを合わせたい。
作ったのがこれ。
textarea_height_auto
$("#editor").css("lineHeight", "20px"); //init
function textarea_height_auto() {
editor = $('#editor')
lineHeight = Number(editor.css("lineHeight").split("px")[0]);
editor.height(editor[0].scrollHeight - lineHeight)
}
#editorは、textareaのidです。
ほんでもって、ページのロード時と、テキストエリアの編集時に自動で発動させるために、以下のように記述。
textarea_height_auto.js（完成版）
$("#editor").css("lineHeight", "20px"); //init
function textarea_height_auto() {
editor = $('#editor')
lineHeight = Number(editor.css("lineHeight").split("px")[0]);
editor.height(editor[0].scrollHeight - lineHeight)
}
textarea_height_auto()
$("#editor").on("input", function (evt) {
textarea_height_auto()
});ふつうに[0]を抜くと、壊れる。
なぜかよくわかりませんが、[0]の意味がわかったら追記します。
あと、lineHeightを差し引かないと、テキスト入力した分だけ高さが追加されていってしまいます。これも原因が不明。
参考にしたサイト
javascript - scrollheight of an element gives undefined value - Stack Overflow
Now in jQuery I want to have it's original height (containing all child elements' height).