入力内容をリアルタイム表示するテキストフィールドを作る方法
入力内容をリアルタイム表示するテキストフィールドを作る方法を紹介します。テキストフィールドへ入力した文字を、入力と同時に別の表示エリアへ反映できるサンプルです。HTML・CSS・JavaScriptだけで実装できるため、ライブラリを使用せずに導入できます。
入力内容をその場で確認したいフォームや、プロフィール編集画面、お問い合わせフォーム、チャット入力欄、管理画面などで活用できます。文字を入力するたびに表示内容が更新されるため、ユーザーは送信前に内容を確認しながら入力できます。入力欄と表示エリアのレイアウトや色、文字サイズなどはCSSで自由に変更できるため、サイトデザインにも合わせやすい構成です。
デモでは、テキストフィールドへ入力した内容がリアルタイムで下のプレビューエリアへ表示されます。文字を削除すると表示も同時に更新されるため、JavaScriptによるリアルタイム連携の基本的な実装方法を確認できます。初心者でも仕組みを理解しやすく、Webフォームや管理画面などへ応用しやすいサンプルコードです。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
テキストフィールドへ入力すると下へリアルタイム表示されます。
テキストフィールドへ文字を入力すると、入力内容が下のプレビューエリアへリアルタイムで表示されます。
コードをコピーして使おう！
<!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="textbox-live-preview_wrap">
<!-- タイトル -->
<div class="textbox-live-preview_title">
リアルタイム入力表示
</div>
<!-- 説明文 -->
<p class="textbox-live-preview_text">
テキストフィールドへ入力すると、下の表示エリアへリアルタイムで反映されます。
</p>
<!-- テキストフィールドのラベル -->
<label
class="textbox-live-preview_label"
for="live-preview-input">
入力してください
</label>
<!-- 入力用テキストフィールド -->
<input
class="textbox-live-preview_input"
id="live-preview-input"
name="live-preview-input"
type="text"
placeholder="ここへ入力">
<!-- 入力内容を表示するエリア -->
<div
class="textbox-live-preview_preview"
id="live-preview-output"
aria-live="polite">
入力内容がここへ表示されます。
</div>
</div>
<!-- JavaScriptファイルを読み込み -->
<script src="script.js"></script>
</body>
</html>ファイル構成と設置方法
このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLでは文字を入力するテキストフィールドと、入力内容を表示するエリアを作成します。CSSではフォーム全体、テキストフィールド、入力内容の表示エリアなどのデザインを設定し、JavaScriptではテキストフィールドへの入力を監視して、入力された文字をリアルタイムで表示エリアへ反映します。
sample/
├── index.html
├── style.css
└── script.js
各ファイルの役割
index.htmlはリアルタイム入力表示フォームを構成するファイルです。タイトル、説明文、ラベル、テキストフィールド、入力内容を表示するエリアを配置しています。表示する文章やプレースホルダーは、このファイルから変更できます。
style.cssはフォーム全体のデザインを設定するファイルです。フォームの横幅や余白、背景色、枠線、角丸のほか、テキストフィールドや入力内容の表示エリアのサイズ・色などを変更できます。
script.jsはテキストフィールドへ入力された文字をリアルタイムで表示するためのファイルです。inputイベントを利用して入力内容を取得し、表示エリアの文字を更新します。テキストフィールドが空になった場合は「入力内容がここへ表示されます。」という初期メッセージへ戻ります。
設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置します。3つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。index.htmlからstyle.cssとscript.jsを読み込む構成になっているため、追加のライブラリや外部サービスは必要ありません。
表示されたテキストフィールドへ文字を入力すると、入力内容が下の表示エリアへリアルタイムで反映されます。入力した文字をすべて削除すると、表示エリアは初期メッセージへ戻ります。
カスタマイズできる内容
index.htmlでは「リアルタイム入力表示」のタイトル、説明文、「入力してください」のラベル、「ここへ入力」のプレースホルダー、入力欄が空の場合に最初に表示しておく文章を変更できます。用途に合わせて、名前、商品名、タイトルなどの入力確認フォームとして利用できます。
style.cssではフォーム全体の最大横幅、余白、背景色、枠線、角丸、テキストフィールドの文字サイズや枠線色、入力中の枠線色、表示エリアの高さや破線などを変更できます。
script.jsでは、テキストフィールドが空になったときに表示する「入力内容がここへ表示されます。」の文章を変更できます。
数値調整
style.css
max-width:700px;
フォーム全体の最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。
margin:40px auto;
フォーム全体の上下余白です。40pxを大きくすると上下の間隔が広がり、小さくすると狭くなります。
padding:32px;
フォーム全体の内側余白です。値を大きくすると内容と外枠の間隔が広がり、小さくすると狭くなります。
border-radius:18px;
フォーム全体の角丸です。値を大きくすると丸みが強くなり、小さくすると角が直線的になります。
font-size:22px;
タイトルの文字サイズです。値を大きくするとタイトルが大きくなり、小さくすると小さくなります。
margin:0 0 24px;
説明文の下側余白です。24pxを大きくするとラベルとの間隔が広がり、小さくすると狭くなります。
margin-bottom:8px;
ラベルとテキストフィールドの間隔です。値を大きくすると間隔が広がり、小さくすると近くなります。
padding:12px 14px;
テキストフィールドの内側余白です。12pxは上下、14pxは左右の余白を表します。値を大きくすると入力文字と枠線の間隔が広がります。
border:2px solid #cbd5e1;
テキストフィールドの通常時の枠線です。2pxを大きくすると枠線が太くなり、小さくすると細くなります。
border-radius:8px;
テキストフィールドと表示エリアの角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
font-size:16px;
入力文字や表示文字などの文字サイズです。値を大きくすると文字が大きくなり、小さくすると小さくなります。
transition:border-color 0.3s ease;
テキストフィールドの枠線色が切り替わる時間です。0.3秒で変化します。値を大きくするとゆっくり、小さくすると速く切り替わります。
min-height:64px;
入力内容を表示するエリアの最小高さです。値を大きくすると表示エリアが高くなり、小さくすると低くなります。
margin-top:24px;
テキストフィールドと表示エリアの間隔です。24pxを大きくすると間隔が広がり、小さくすると狭くなります。
padding:18px;
表示エリアの内側余白です。値を大きくすると文字と枠線の間隔が広がり、小さくすると狭くなります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%;とmax-width:700px;によって、画面幅に合わせてフォーム全体の横幅が縮小されます。
画面幅640px以下では、ページ全体の余白をpadding:24px 12px;、フォーム全体をmargin:24px auto;とpadding:24px 18px;へ変更します。スマートフォンでは左右の余白を抑えながら、タブレットやPCでは最大700pxのフォームとして表示できます。
コメント