jQuery - テキストエリアの高さを自動で調節する時に困ったこと(解決済)

2018-08-08 19:21:15 703

困ったこと

テキストエリアの高さを、入力された内容に応じて高さを自動でフィットさせたくて、色々ためしていました。
要は、スクロールさせたくなかったんです。
スマホで入力するときにすごく面倒だから。画面のスクロールとテキストエリアのスクロールが平行しちゃうから、どうしてもやりにくい。
  • https://webkaru.net/jquery-plugin/autoexpand/
  • ここではプラグインを紹介していますが、そこまでする必要はないだろうと思い、
    作ることに。
    ひとまず、ページを読み込んだ時点で自動で高さを合わせたい。
    作ったのがこれ。

    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()
    });
    途中でハマったのが、editor[0].scrollHeightの部分。
    ふつうに[0]を抜くと、壊れる。
    なぜかよくわかりませんが、[0]の意味がわかったら追記します。
    あと、lineHeightを差し引かないと、テキスト入力した分だけ高さが追加されていってしまいます。これも原因が不明。

    参考にしたサイト

    関連記事