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

JavaScriptでテキストエリアを自動拡張する方法【CSS・jQuery活用】

JavaScriptを使えば、テキストエリア（textarea）要素が入力内容に合わせて自動的に高さを拡張するように設定できます。

通常、テキストエリアは高さが固定されているため、文字数が増えるとスクロールバーが表示されてしまいます。しかし、scrollHeightプロパティとjQueryのinputイベントを組み合わせることで、入力に応じてテキストエリアの高さを動的に調整することが可能です。

以下に、この機能を実現する具体的なサンプルコードを2つの例で紹介します。

例1：基本的な自動拡張テキストエリア

<!DOCTYPE html>
<html>
<head>
<style>
* {
   margin: 3%;
   color: navy;
   font-size: 1.2em;
}
#ta {
   padding: 2%;
   resize: none;
   width: 330px;
   min-height: 80px;
   overflow: hidden;
   box-sizing: border-box;
}
</style>
</head>
<body>
<form>
<label for="ta">Cool TextArea</label>
<textarea id="ta"></textarea>
</form>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$("#ta").on('input', function() {
   var scroll_height = $("#ta").get(0).scrollHeight;
   $("#ta").css('height', scroll_height + 'px');
});
</script>
</body>
</html>

出力結果

このコードを実行すると、次のような結果が得られます。

JavaScriptでテキストエリアを自動拡張する方法【CSS・jQuery活用】

JavaScriptでテキストエリアを自動拡張する方法【CSS・jQuery活用】

テキストを入力するたびにテキストエリアの高さが自動的に伸びていき、スクロールバーが表示されないことが確認できます。

例2：div要素内のテキストエリアを自動拡張

<!DOCTYPE html>
<html>
<head>
<style>
div {
   margin: 3%;
   overflow-y: scroll;
}
#ta {
   padding: 2%;
   resize: none;
   width: 333px;
   min-height: 90px;
   overflow: hidden;
   box-sizing: border-box;
   font-size: 1.5em;
}
</style>
</head>
<body>
<div>
<textarea id="ta"></textarea>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$("#ta").on('input', function() {
   var scroll_height = $("#ta").get(0).scrollHeight;
   $("#ta").css('height', scroll_height + 'px');
});
</script>
</body>
</html>

出力結果

このコードを実行すると、次のような結果が得られます。

JavaScriptでテキストエリアを自動拡張する方法【CSS・jQuery活用】

仕組みの解説

この自動拡張の仕組みは、以下の要素によって成り立っています。

  • inputイベント：ユーザーがテキストを入力するたびに発火し、都度高さを再計算します。
  • scrollHeight：要素のコンテンツ全体の高さ（隠れているスクロール分も含む）を取得できるプロパティです。
  • overflow: hidden：テキストエリア自体のスクロールバーを非表示にし、見た目の違和感なく拡張させます。
  • box-sizing: border-box：paddingを含めて幅と高さを計算するため、レイアウトが崩れません。
  • resize: none：ユーザーによる手動リサイズを無効化し、自動制御に統一します。

この手法は、チャットフォームやコメント欄など、長文入力が想定されるUIで特に有効です。ぜひ実際のプロジェクトでも活用してみてください。

  1. CSSとJavaScriptで実装するライトボックスのアニメーション

    CSSとJavaScriptを組み合わせることで、Webページにおしゃれなライトボックス（Lightbox）を実装できます。ライトボックスとは、サムネイル画像をクリックした際に拡大画像が画面上にオーバーレイ表示される、よく使われるUIパターンのことです。本記事では、CSSの:target疑似クラスとトランジションを活用してライトボックスをスタイリングする方法を、具体的なコード例とともに解説します。 実装例 以下の例では、ページ内アンカー（#picture）へのリンクと:target疑似クラスを連動させることで、クリック操作だけでライトボックスの開閉を実現しています。画像の拡大表示にはtran

  2. JavaScriptでCSSルールをスタイルシートに追加・削除する方法【insertRule()とdeleteRule()の使い方】

    JavaScriptを使えば、ページに読み込まれたスタイルシートに対して動的にCSSルールを操作できます。その中心的な役割を果たすのが insertRule() メソッドと deleteRule() メソッドです。insertRule(): スタイルシート内の指定した位置（インデックス）に新しいCSSルールを追加します。deleteRule(): 指定したインデックスにある既存のスタイルルールを削除します。以下の具体例を通じて、JavaScriptでスタイルシートへCSSルールを追加する方法を見ていきましょう。例1：insertRule()で新しいルールを追加する<!DOCTYPE ht