自動で高さが広がるテキストエリアを作る方法
自動で高さが広がるテキストエリアを作る方法を紹介します。このサンプルでは、HTML・CSS・JavaScriptを使用し、入力した文章量に応じてテキストエリアの高さが自動で広がるフォームを作成します。改行や長文を入力してもスクロールバーに頼らず内容全体を確認しながら入力できるため、文章を扱うフォームで利用しやすい構成です。
お問い合わせ画面、会員サイトのプロフィール編集、ECサイトの注文時に利用する備考欄、管理画面のメモ入力など、長文を入力する場面に適しています。入力文字数が増えるたびにテキストエリアの高さが自動調整されるため、入力内容を見失いにくく、スマートフォン・タブレット・PCでも快適に利用できます。
タイトル、説明文、ラベル、プレースホルダーはHTMLから変更でき、CSSでは横幅、色、余白、角丸、文字サイズなどを調整できます。JavaScriptでは高さを自動調整する処理を行っているため、用途に合わせて初期の高さやデザインを変更しながら利用しやすく、初心者でも導入しやすいテキストエリアのサンプルです。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
文章を入力すると高さが自動で広がります。
テキストエリアへ文章を入力してください。入力内容が増えると高さが自動で広がる動作を確認できます。
コードをコピーして使おう！
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- 文字コード -->
<meta charset="UTF-8">
<!-- スマートフォン対応 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ページタイトル -->
<title>自動で高さが広がるテキストエリア</title>
<!-- CSSファイル -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- 入力フォーム全体 -->
<div class="auto-resize-textarea_wrap">
<!-- タイトル -->
<div class="auto-resize-textarea_title">
お問い合わせ内容
</div>
<!-- 説明文 -->
<p class="auto-resize-textarea_text">
文章を入力すると高さが自動で広がります。
</p>
<!-- 入力項目 -->
<div class="auto-resize-textarea_group">
<!-- ラベル -->
<label
class="auto-resize-textarea_label"
for="message">
内容
</label>
<!-- 自動で高さが広がるテキストエリア -->
<textarea
class="auto-resize-textarea_input"
id="message"
name="message"
placeholder="お問い合わせ内容を入力してください。"></textarea>
</div>
</div>
<!-- JavaScriptファイル -->
<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はテキストエリアやラベル、タイトル、説明文など画面全体を構成するファイルです。表示する文章やプレースホルダーを変更できます。
style.cssはテキストエリア全体のデザインを設定するファイルです。横幅、高さ、余白、文字サイズ、背景色、角丸、枠線、フォーカス時のデザインなどを変更できます。
script.jsは入力内容に合わせてテキストエリアの高さを自動調整する処理を行うファイルです。入力するたびに高さを再計算し、内容全体が表示されるよう制御します。
設置方法・使い方
sampleフォルダへindex.html・style.css・script.jsを配置します。sample/index.htmlをブラウザで開き、テキストエリアへ文章を入力すると、入力内容に応じて高さが自動で広がる動作を確認できます。
カスタマイズできる内容
index.htmlではタイトル、説明文、ラベル、プレースホルダーを変更できます。style.cssではテキストエリアの横幅、初期の高さ、文字サイズ、余白、角丸、背景色、枠線の色などを変更できます。script.jsでは高さを調整する処理をそのまま利用しながら、対象となるテキストエリアを変更することもできます。
数値調整
style.css
max-width:700px;
フォーム全体の最大横幅です。値を大きくすると横長になり、小さくするとコンパクトになります。
padding:32px;
フォーム全体の内側余白です。値を大きくすると余白が広がり、小さくすると詰まった表示になります。
min-height:140px;
テキストエリアの初期高さです。値を大きくすると最初から高く表示され、小さくするとコンパクトになります。
padding:14px 16px;
テキストエリアの内側余白です。上下の値を大きくすると入力欄が高くなります。
border-radius:10px;
テキストエリアの角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
transition:0.3s;
枠線や影が切り替わる時間です。0.3秒で変化します。値を大きくするとゆっくり、小さくすると速く切り替わります。
box-shadow:0 0 0 4px ...
フォーカス時に表示する外側の強調範囲です。4pxを変更すると強調表示の太さが変わります。
script.js
textarea.scrollHeight
入力内容全体の高さを取得する値です。入力された文章量に合わせてテキストエリアの高さを自動で調整します。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-widthにより画面幅に合わせて縮小表示されます。また、640px以下では余白を調整し、スマートフォン・タブレット・PCでも快適に入力できます。
コメント