follmy

素のJavaScriptを使ってtextareaの高さを、文字入力に応じて拡大縮小する方法

2021-05-01

結論

scrollHeight と Promise を使って、高さを調整する。初期の高さも、同じメソッドを使って画面構築後に設定する。

// textareaの高さを調整するメソッド
function autoAdjustTextarea(textarea) {
  // scrollHeightの高さをリセット
  // リセットしないと、行数が減ったときの高さを取得できないのでheightをautoで初期の高さにリセットしている(0pxでもいけた)
  // Promiseを使って、高さが再設定されてからsrollHeightを取得するようにしている
  const resetHeight = new Promise(resolve => {
    resolve((textarea.style.height = "auto"))
  })

  resetHeight.then(() => {
    const scrollHeight = textarea.scrollHeight
    textarea.style.height = scrollHeight + "px"
  })
}

// 対象のtextareaのclass
const classList = [
  ".list-title__title",
  ".list-description__description",
  ".item-title__title",
  ".item-content__content",
]

// 画面表示時に文字の行数に応じた高さをセットする
classList.forEach(className => {
  const textareaElements = document.querySelectorAll(className)

  textareaElements.forEach(textarea => {
    autoAdjustTextarea(textarea)
  })
})

// inputの変更を監視して文字の高さを自動調整する
classList.forEach(className => {
  const textareaElements = document.querySelectorAll(className)

  textareaElements.forEach(textarea => {
    textarea.addEventListener("input", () => {
      autoAdjustTextarea(textarea)
    })
  })
})

ちなみに、clientHeight と scrollheight の違い

clientHeight は可視化された部分のみの高さを取得するのに対して、scrollHeight はスクロールしないと見えない部分も含めた高さを取得する違いがあるらしい。

参考

【JavaScript】textarea の入力内容で高さを自動調整する

textarea の高さを入力内容によって可変したい

要素サイズとスクローリング


プロフィール

koyamaaa2です。

プライバシーポリシー