入力内容をリアルタイム表示するテキストボックスを作る方法
入力内容をリアルタイム表示するテキストボックスを作る方法を紹介します。テキストボックスへ入力した文字を、入力と同時に別の表示エリアへ反映できるサンプルです。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>
/* ページ全体 */
body{
margin:0; /* ブラウザ標準の外側余白を削除 */
padding:40px 20px; /* 上下40px・左右20pxの余白 */
background:#ffffff; /* ページ全体の背景色 */
color:#111827; /* ページ全体の基本文字色 */
font-family:sans-serif; /* ページ全体で使用するフォント */
box-sizing:border-box; /* paddingと枠線を要素の幅・高さに含める */
}
/* リアルタイム表示フォーム全体 */
.textbox-live-preview_wrap{
width:100%; /* 画面幅に合わせて横幅を縮小する */
max-width:700px; /* 最大横幅。値を大きくすると広く、小さくすると狭くなる */
margin:40px auto; /* 上下40pxの余白を付けて左右中央へ配置する */
padding:32px; /* 内側余白。値を大きくすると内容と外枠の間隔が広がる */
border:1px solid #dbe4f0; /* 全体を囲む枠線の太さ・種類・色 */
border-radius:18px; /* 全体の角丸。値を大きくすると丸みが強くなる */
background:#f8fbff; /* フォーム全体の背景色 */
box-sizing:border-box; /* paddingと枠線を要素の幅・高さに含める */
}
/* タイトル */
.textbox-live-preview_title{
margin:0 0 12px; /* 下側12pxの余白 */
color:#111827; /* タイトルの文字色 */
font-size:22px; /* タイトルの文字サイズ */
font-weight:700; /* タイトルを太字にする */
line-height:1.5; /* タイトルの行間 */
text-align:center; /* タイトルを中央揃えで表示する */
}
/* 説明文 */
.textbox-live-preview_text{
margin:0 0 24px; /* 下側24pxの余白 */
color:#4b5563; /* 説明文の文字色 */
font-size:16px; /* 説明文の文字サイズ */
line-height:1.8; /* 説明文の行間 */
text-align:center; /* 説明文を中央揃えで表示する */
}
/* テキストボックスのラベル */
.textbox-live-preview_label{
display:block; /* ラベルを1行で表示する */
margin-bottom:8px; /* テキストボックスとの間隔 */
color:#111827; /* ラベルの文字色 */
font-size:16px; /* ラベルの文字サイズ */
font-weight:700; /* ラベルを太字にする */
line-height:1.5; /* ラベルの行間 */
}
/* 入力用テキストボックス */
.textbox-live-preview_input{
display:block; /* テキストボックスをブロック要素で表示する */
width:100%; /* 親要素の横幅いっぱいに表示する */
padding:12px 14px; /* 上下12px・左右14pxの内側余白 */
border:2px solid #cbd5e1; /* 通常時の枠線の太さ・種類・色 */
border-radius:8px; /* テキストボックスの角丸 */
background:#ffffff; /* テキストボックスの背景色 */
color:#111827; /* 入力文字の色 */
font-family:inherit; /* 親要素と同じフォントを使用する */
font-size:16px; /* 入力文字のサイズ */
line-height:1.5; /* 入力文字の行間 */
box-sizing:border-box; /* paddingと枠線を要素の幅・高さに含める */
outline:none; /* フォーカス時のブラウザ標準の外枠を非表示にする */
/* 0.3秒で枠線色を切り替える
値を大きくするとゆっくり、小さくすると速くなる */
transition:border-color 0.3s ease;
}
/* テキストボックス入力中 */
.textbox-live-preview_input:focus{
border-color:#2563eb; /* 入力中の枠線色 */
}
/* プレースホルダー */
.textbox-live-preview_input::placeholder{
color:#9ca3af; /* プレースホルダーの文字色 */
opacity:1; /* ブラウザによる透明度の違いをなくす */
}
/* 入力内容の表示エリア */
.textbox-live-preview_preview{
min-height:64px; /* 最小高さ。値を大きくすると表示エリアが高くなる */
margin-top:24px; /* テキストボックスとの間隔 */
padding:18px; /* 表示エリアの内側余白 */
border:2px dashed #94a3b8; /* 表示エリアを囲む破線 */
border-radius:8px; /* 表示エリアの角丸 */
background:#ffffff; /* 表示エリアの背景色 */
color:#334155; /* 表示文字の色 */
font-size:16px; /* 表示文字のサイズ */
line-height:1.7; /* 表示文字の行間 */
white-space:pre-wrap; /* 空白と改行を保持して表示する */
overflow-wrap:anywhere; /* 長い文字列を画面幅に合わせて折り返す */
box-sizing:border-box; /* paddingと枠線を要素の幅・高さに含める */
}
/* 画面幅640px以下 */
@media screen and (max-width:640px){
/* スマートフォン表示時のページ全体 */
body{
padding:24px 12px; /* 上下24px・左右12pxへ余白を縮小する */
}
/* スマートフォン表示時のフォーム全体 */
.textbox-live-preview_wrap{
margin:24px auto; /* 上下余白を24pxへ縮小する */
padding:24px 18px; /* 上下24px・左右18pxへ内側余白を縮小する */
}
}
// 入力用テキストボックスを取得
const livePreviewInput=
document.getElementById("live-preview-input");
// 入力内容の表示エリアを取得
const livePreviewOutput=
document.getElementById("live-preview-output");
// テキストボックスへ文字が入力された時
livePreviewInput.addEventListener("input",function(){
// 入力された文字を取得
const inputText=livePreviewInput.value;
// 文字が入力されている場合は入力内容を表示
if(inputText){
livePreviewOutput.textContent=inputText;
}else{
// 入力欄が空の場合は初期メッセージを表示
livePreviewOutput.textContent=
"入力内容がここへ表示されます。";
}
});
コードをコピーする場合
使用するコードのタブを選び、「このタブをコピー」をクリックすると、現在表示中のコードをコピーできます。
サンプル一式を取得する場合
HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLで入力欄とリアルタイム表示エリアを配置し、CSSでレイアウトやデザインを整え、JavaScriptで入力内容をリアルタイムに表示エリアへ反映します。ライブラリを使用せずに動作するため、そのままコピーして導入しやすく、初心者でも仕組みを理解しながら利用できます。
sample/
├── index.html
├── style.css
└── script.js
各ファイルの役割
index.htmlでは、入力用テキストボックスとリアルタイム表示エリアを配置しています。タイトルや説明文、ラベル、プレースホルダーなどの表示内容を自由に変更できます。
style.cssでは、フォーム全体のレイアウトや背景色、文字色、枠線、余白、角丸などのデザインを設定しています。表示エリアのデザインやレスポンシブ表示もこのファイルで管理しています。
script.jsでは、テキストボックスへ入力された内容をリアルタイムで表示エリアへ反映しています。入力内容が空になった場合は初期メッセージを表示する処理もこのファイルで行っています。
設置方法・使い方
sampleフォルダ内の3ファイルを同じ階層へ配置してください。配置後はsample/index.htmlをブラウザで開くだけで利用できます。テキストボックスへ文字を入力すると、入力内容が下の表示エリアへリアルタイムで反映されます。
カスタマイズできる内容
index.htmlではタイトルや説明文、ラベル、プレースホルダー、初期メッセージを変更できます。style.cssでは背景色、文字色、枠線、余白、角丸、文字サイズなどを自由に変更できます。script.jsでは表示先の要素や初期表示メッセージ、リアルタイム表示の対象となる入力欄を変更できます。
数値調整
style.cssのmax-width:700px;を変更するとフォーム全体の横幅を調整できます。padding:32px;を変更すると内側余白が変わります。border-radius:18px;を変更すると角丸の大きさを調整できます。min-height:64px;を変更すると表示エリアの高さが変わります。transition:border-color 0.3s ease;の0.3秒は枠線色が切り替わる時間を表し、値を大きくするとゆっくり、小さくすると速く切り替わります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssではwidth:100%とmax-widthを利用して画面幅に応じてフォームサイズを自動調整しています。また、640px以下ではメディアクエリで余白を調整しているため、スマートフォン・タブレット・PCでも見やすく快適に利用できます。
コメント