ページを移動しても内容を記憶するテキストボックスの作り方
ページを移動しても入力内容を記憶するテキストボックスの作り方を紹介します。このサンプルでは、テキストボックスへ入力した文字列をJavaScriptで取得し、ブラウザのlocalStorageへ保存します。ページを再読み込みした場合や、同じサイト内の別ページへ移動してから戻った場合でも、保存されている内容を読み込んでテキストボックスへ復元できます。
会員サイトのプロフィール入力、管理画面の検索キーワード、ECサイトの入力フォーム、設定画面の名前や識別情報など、短い文字列を入力する項目の内容を維持したい場面に利用できます。文字を入力するたびに内容が保存されるため、ページを離れて戻った場合でも、もう一度最初から入力し直す手間を減らせます。
保存内容にはこのコード側で有効期限を設定していないため、localStorageのデータが削除されるまでブラウザ内に保持されます。ただし、別のブラウザや別の端末へ自動的に共有されるものではなく、ブラウザのサイトデータやlocalStorageを削除した場合は保存内容も失われます。HTMLではタイトル、説明文、ラベル、プレースホルダーを変更でき、CSSでは横幅、余白、背景色、枠線、角丸などを調整できます。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
入力した文字はブラウザへ保存されます。
文字を入力したあとにページを再読み込みしても、入力した内容がテキストボックスへ復元されます。
コードをコピーして使おう！
<!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="remember-textbox-content_wrap">
<!-- タイトル -->
<div class="remember-textbox-content_title">
入力内容を記憶するテキストボックス
</div>
<!-- 説明文 -->
<p class="remember-textbox-content_text">
入力した文字はブラウザへ保存されます。
</p>
<!-- 入力項目 -->
<div class="remember-textbox-content_group">
<!-- ラベル -->
<label
class="remember-textbox-content_label"
for="remember-textbox-content">
名前
</label>
<!-- 入力内容を保存するテキストボックス -->
<input
id="remember-textbox-content"
class="remember-textbox-content_input"
type="text"
placeholder="名前を入力してください。">
</div>
</div>
<!-- 補足説明 -->
<p class="remember-textbox-content_note">
文字を入力したあとにページを再読み込みしても、入力した内容がテキストボックスへ復元されます。
</p>
<!-- JavaScriptファイル -->
<script src="script.js"></script>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLでテキストボックスのタイトル、説明文、ラベル、入力欄を作成し、CSSで横幅や余白、枠線、角丸、フォーカス時の表示などを整えます。JavaScriptではテキストボックスへ入力された文字列を取得し、ブラウザのlocalStorageへ保存します。
テキストボックスへ文字を入力するたびに現在の内容がlocalStorageへ保存されます。ページを再読み込みした場合や、同じサイト内の別ページへ移動してから戻った場合は、保存されている文字列を読み込んでテキストボックスへ復元します。入力途中の名前や短い文字列などを残しておきたい場面で利用できます。
localStorageへ保存した内容には、このコード側で有効期限を設定していません。保存内容は利用しているブラウザ内に保持されますが、別のブラウザや別の端末へ自動的に共有されるものではありません。また、ブラウザのサイトデータやlocalStorageが削除された場合は入力内容も失われます。外部ライブラリは使用せず、HTML・CSS・バニラJavaScriptだけで動作します。
sample/
├── index.html
├── style.css
└── script.js
各ファイルの役割
index.htmlはテキストボックス全体を構成するファイルです。「入力内容を記憶するテキストボックス」のタイトル、説明文、「名前」のラベル、プレースホルダー、補足説明を変更できます。input要素へ入力した文字列がJavaScriptの保存対象になります。
style.cssはテキストボックス全体のデザインを設定するファイルです。最大横幅、余白、背景色、枠線、角丸、タイトルやラベルの文字サイズ、入力欄の高さ、フォーカス時の枠線や影などを変更できます。
script.jsは入力内容の保存と復元を行うファイルです。ページ表示時にlocalStorageから保存済みの文字列を取得し、データが存在する場合はテキストボックスへ設定します。また、inputイベントを利用して、文字が入力・削除されるたびに現在の内容をlocalStorageへ保存します。
設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを同じ階層で配置します。3つのファイルを保存したあと、sample/index.htmlをブラウザで開いてください。テキストボックスへ文字を入力すると、その内容がブラウザのlocalStorageへ保存されます。
文字を入力したあとにページを再読み込みするか、別のページへ移動してから戻ると、保存されている内容が自動的にテキストボックスへ復元されます。入力した文字を削除した場合も、その時点の内容へ保存データが更新されます。
保存内容はブラウザ内に保持されるため、同じサイトを別のブラウザや別の端末で開いても自動的には引き継がれません。また、利用者がブラウザのサイトデータを削除した場合は保存された文字列も削除されます。
カスタマイズできる内容
index.htmlではタイトル、説明文、ラベル、プレースホルダー、補足説明を変更できます。名前入力、検索キーワード、管理画面の短いメモ、識別名など、用途に合わせた表示へ変更できます。
style.cssでは全体の最大横幅、余白、背景色、枠線、角丸、テキストボックスの高さ、入力文字の行間、フォーカス時の色や影などを変更できます。
script.jsではremember-textbox-contentをlocalStorageの保存名として使用しています。この文字列を変更すると、入力内容を保存するキー名を変更できます。
数値調整
style.css
padding:40px 20px;
ページ全体の余白です。40pxは上下、20pxは左右の余白を表します。値を大きくすると画面端との間隔が広がります。
max-width:700px;
テキストボックス全体の最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。
margin:40px auto;
テキストボックス全体の上下余白です。40pxを大きくすると上下の間隔が広がり、小さくすると狭くなります。
padding:32px;
テキストボックス全体の内側余白です。値を大きくすると内容と外枠の間隔が広がります。
border-radius:18px;
テキストボックス全体の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
font-size:22px;
タイトルの文字サイズです。値を大きくするとタイトルが大きく表示されます。
margin:0 0 24px;
説明文の下側余白です。24pxを大きくすると入力項目との間隔が広がります。
gap:10px;
ラベルとテキストボックスの間隔です。値を大きくすると両者の間隔が広がります。
min-height:52px;
テキストボックスの最小高さです。値を大きくすると入力欄が高くなります。
padding:14px 16px;
テキストボックスの内側余白です。14pxは上下、16pxは左右の余白です。値を大きくすると入力文字と枠線の間隔が広がります。
border:2px solid #d1d5db;
テキストボックスの枠線です。2pxを大きくすると枠線が太くなり、小さくすると細くなります。
border-radius:10px;
テキストボックスの角丸です。値を大きくすると丸みが強くなります。
line-height:1.5;
入力文字の行間です。値を大きくすると文字周辺の縦方向の間隔が広がります。
transition:0.3s;
フォーカス時に枠線と影が切り替わる時間です。0.3秒で変化し、値を大きくするとゆっくり、小さくすると速く切り替わります。
box-shadow:0 0 0 4px ...
フォーカス時に表示する外側の強調範囲です。4pxを大きくすると影の広がりが大きくなります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:700pxによって、画面幅に合わせてテキストボックス全体が縮小されます。画面幅640px以下ではページ全体の余白を24px 16px、テキストボックス全体の余白を24px 18pxへ変更しています。スマートフォン・タブレット・PCで利用できます。
コメント