JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptで入力に応じて自動的に高さが変わるテキストエリアを作成する方法

Webフォームなどで長い文章を入力する際、テキストエリアの高さが固定されているとスクロールが必要になり、使い勝手が損なわれることがあります。そこで役立つのが、入力内容に応じて高さを自動的に調整する「自動リサイズテキストエリア」です。

仕組み

実装のポイントは次の2点です。

  • inputイベント：ユーザーがテキストを入力・貼り付けするたびに処理を実行します。
  • scrollHeightプロパティ：要素の中身全体の高さを取得し、その値をstyle.heightに設定することで、コンテンツに合わせた高さに変更できます。

一度heightを「auto」に戻してからscrollHeightを設定するのがポイントです。これにより、文字を削除した場合にも高さが正しく縮小されます。

サンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
</style>
</head>
<body>
<h1>自動リサイズテキストエリア</h1>
<textarea class="resizeArea"></textarea>
<script>
    let resizeEle = document.querySelector(".resizeArea");
    resizeEle.addEventListener("input", resizeTextArea, false);
    function resizeTextArea() {
        this.style.height = "auto";
        this.style.height = this.scrollHeight + "px";
    }
</script>
</body>
</html>

コードの解説

  1. document.querySelector()で対象のテキストエリア要素を取得します。
  2. addEventListener("input", ...)により、入力のたびに関数resizeTextArea()が呼び出されます。
  3. 関数内ではまずthis.style.height = "auto"で高さをリセットし、続いてthis.scrollHeightで必要な高さを取得して再設定します。

実行結果

初期状態ではテキストエリアは標準的な高さで表示されます。

JavaScriptで入力に応じて自動的に高さが変わるテキストエリアを作成する方法

テキストエリアに文章を貼り付けたり入力したりすると、以下のように内容量に応じてエリアが自動的に拡張されます。スクロールバーが出ることなく、すべてのテキストが見える状態を保てます。

JavaScriptで入力に応じて自動的に高さが変わるテキストエリアを作成する方法

まとめ

わずか数行のJavaScriptで、入力内容に合わせて自動的に伸縮するテキストエリアを実現できます。チャットフォームやお問い合わせフォームなど、ユーザーが長文を入力する場面でUXを大きく向上させるテクニックなので、ぜひ活用してみてください。

  1. JavaScriptでテキストエリアの矢印キー操作を無効にする方法

    JavaScriptを使えば、テキストエリア（textarea）内での矢印キーによるスクロールを簡単に無効化できます。仕組みとしては、keydownイベントを監視し、矢印キーが押されたタイミングでpreventDefault()を呼び出すことで、ブラウザのデフォルトのスクロール動作をキャンセルします。 実装例 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <meta name="viewport"

  2. JavaScriptのimportで波括弧「{}」を使う理由とは？名前付きエクスポートの基本をわかりやすく解説

    JavaScript（ESモジュール）でモジュールを読み込む際、import 文に波括弧 { } を付けるかどうか迷ったことはありませんか？実はこの波括弧は、名前付きエクスポート（named export）を読み込むために必要な記法です。本記事では、実際のコード例を使いながら、{ } の役割と使い方を詳しく解説します。 importで { } を使う場面とは JavaScriptのESモジュールでは、エクスポート方法によって読み込み側の書き方が変わります。 名前付きエクスポート：export { 関数名 } のようにエクスポートされたものを読み込む場合は、import { 名前 } fro