入力内容に応じて高さが自動で広がるテキストエリアを作る方法
入力内容に応じて高さが自動で広がるテキストエリアを作る方法を紹介します。通常のテキストエリアは文章が長くなるとスクロールバーが表示されますが、このサンプルでは入力内容に合わせて高さが自動で調整されるため、入力した文章全体をそのまま確認できます。HTML・CSS・JavaScriptだけで実装できるため、既存のフォームへも導入しやすい構成です。
お問い合わせ画面や管理画面、会員サイトのプロフィール編集、日報や議事録の入力フォームなど、長文を入力する場面で役立ちます。入力するたびに高さがリアルタイムで変化し、文章を削除すると高さも自動で縮小されるため、常に入力内容に適したサイズを維持できます。スクロール操作が減ることで、入力内容を確認しながら快適に編集できます。
このサンプルでは、初期の高さや余白、文字サイズ、枠線の色などをCSSから変更できるほか、JavaScriptによる高さの自動調整処理も自由に編集できます。レスポンシブにも対応しているため、スマートフォン・タブレット・PCなど画面サイズの異なる環境でも扱いやすく、実際のWebサイトやWebアプリへ取り入れやすいテキストエリアを作成できます。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
テキストエリアへ文字を入力すると、入力内容に合わせて高さが自動で広がります。文章を削除すると高さも自動で縮小されるため、常に入力内容全体を見ながら編集できます。
コードをコピーして使おう！
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>入力内容に応じて高さが自動で広がるテキストエリア</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- 全体 -->
<div class="textarea-auto-expand_wrap">
<!-- タイトル -->
<p class="textarea-auto-expand_title">
お問い合わせ内容
</p>
<!-- 説明文 -->
<p class="textarea-auto-expand_text">
入力内容に応じてテキストエリアの高さが自動で広がります。
</p>
<!-- ラベル -->
<label class="textarea-auto-expand_label" for="message">
内容
</label>
<!-- テキストエリア -->
<textarea
id="message"
class="textarea-auto-expand_input"
placeholder="お問い合わせ内容を入力してください。"
></textarea>
</div>
<script src="script.js"></script>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLではタイトル、説明文、ラベル、テキストエリアを配置し、CSSではフォーム全体と入力欄のデザインを設定します。JavaScriptでは入力内容の高さを取得し、文字の入力や削除に合わせてテキストエリアの高さを自動調整します。
sample/
├── index.html
├── style.css
└── script.js
各ファイルの役割
index.htmlは入力フォーム全体を構成するファイルです。「お問い合わせ内容」のタイトル、説明文、「内容」のラベル、プレースホルダーを変更できます。テキストエリアにはmessageというIDを設定し、script.jsから高さを調整できるようにしています。
style.cssはページ全体、フォーム、タイトル、説明文、ラベル、テキストエリアのデザインを設定するファイルです。フォームの横幅、余白、背景色、枠線、角丸、テキストエリアの初期高さ、文字の行間などを変更できます。resize:none;で手動によるサイズ変更を無効にし、overflow:hidden;でスクロールバーを非表示にしています。
script.jsはテキストエリアの高さを自動調整するファイルです。入力が発生するたびに一度高さをautoへ戻し、scrollHeightで取得した入力内容全体の高さを設定します。文章を追加すると高さが広がり、文章を削除すると高さも縮小します。
設置方法・使い方
sampleフォルダを作成し、その中へindex.html・style.css・script.jsを配置します。3つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。テキストエリアへ文章を入力すると、入力内容に応じて高さが自動で広がります。入力した文章を削除すると、内容に合わせて高さも自動で縮小します。
カスタマイズできる内容
index.htmlではページタイトル、フォーム内のタイトル、説明文、ラベル、プレースホルダーを変更できます。お問い合わせ画面、管理画面のメモ欄、会員サイトのプロフィール入力、ECサイトの備考欄など、用途に合わせた文章へ編集できます。
style.cssではページとフォームの背景色、最大横幅、余白、枠線、角丸、文字サイズ、行間、テキストエリアの初期高さを変更できます。手動での高さ変更を許可する場合はresize:none;を変更できますが、表示方法が変わるため自動調整との動作を確認してください。
script.jsでは高さを自動調整する対象を変更できます。別のテキストエリアへ適用する場合は、index.htmlのIDとgetElementById("message")へ指定するIDを一致させてください。
数値調整
style.css
padding:40px 20px;
ページ全体の内側余白です。40pxは上下、20pxは左右の余白を表します。値を大きくすると画面端との間隔が広がり、小さくすると狭くなります。
max-width:760px;
フォーム全体の最大横幅です。値を大きくすると横長になり、小さくするとコンパクトになります。
margin:40px auto;
フォーム全体の上下余白です。40pxを大きくすると上下の間隔が広がります。autoによって左右中央へ配置します。
padding:32px;
フォーム全体の内側余白です。値を大きくすると内容と枠線の間隔が広がり、小さくすると狭くなります。
border:1px solid #dbe4f0;
フォーム全体の枠線です。1pxを大きくすると枠線が太くなります。
border-radius:18px;
フォーム全体の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
margin:0 0 12px;
タイトルの下側余白です。12pxを大きくすると説明文との間隔が広がり、小さくすると狭くなります。
font-size:22px;
タイトルの文字サイズです。値を大きくすると文字が大きくなり、小さくすると小さくなります。
margin:0 0 28px;
説明文の下側余白です。28pxを大きくするとラベルとの間隔が広がり、小さくすると狭くなります。
line-height:1.8;
説明文とテキストエリア内の文字の行間です。値を大きくすると行間が広がり、小さくすると詰まった表示になります。
margin-bottom:10px;
ラベルとテキストエリアの間隔です。10pxを大きくすると間隔が広がり、小さくすると近くなります。
font-size:18px;
ラベルの文字サイズです。値を大きくすると文字が大きくなり、小さくすると小さくなります。
min-height:180px;
テキストエリアの初期の最低高さです。値を大きくすると最初から高く表示され、小さくすると低くなります。入力後はJavaScriptによって内容に合わせた高さへ調整されます。
padding:16px;
テキストエリアの内側余白です。値を大きくすると入力文字と枠線の間隔が広がり、小さくすると狭くなります。
border:2px solid #2563eb;
テキストエリアの枠線です。2pxを大きくすると枠線が太くなり、小さくすると細くなります。
border-radius:14px;
テキストエリアの角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
padding:20px;
画面幅640px以下で使用するフォーム全体の内側余白です。値を大きくするとスマートフォン表示時の余白が広がります。
min-height:160px;
画面幅640px以下で使用するテキストエリアの初期の最低高さです。値を変更するとスマートフォン表示時の初期高さが変わります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:760pxによって、画面幅に合わせてフォーム全体が縮小されます。また、画面幅640px以下ではフォームの内側余白を20px、テキストエリアの初期高さを160pxへ変更するメディアクエリを設定しているため、スマートフォン・タブレット・PCで利用できます。
コメント