ページを移動しても内容を記憶するテキストエリアの作り方
ページを移動しても入力内容を記憶するテキストエリアの作り方を紹介します。このサンプルでは、テキストエリアへ入力した文章をJavaScriptで取得し、ブラウザのlocalStorageへ保存します。ページを再読み込みした場合や、同じサイト内の別ページへ移動してから戻った場合でも、保存されている文章を読み込んでテキストエリアへ復元できます。
お問い合わせフォームの下書き、会員サイトのプロフィール編集、管理画面のメモ入力、ECサイトの備考欄など、入力途中の文章を残しておきたい場面で利用できます。入力するたびに内容が保存されるため、利用者がページを離れて戻った場合でも、もう一度最初から文章を入力する必要がありません。保存した内容には有効期限を設定していないため、localStorageのデータが削除されるまでブラウザ内に保持されます。
保存内容は利用しているブラウザ内に保持されるため、別のブラウザや別の端末には共有されません。また、ブラウザのサイトデータやlocalStorageを削除すると保存内容も消去されます。HTMLではタイトル、説明文、ラベル、プレースホルダーを変更でき、CSSでは横幅、高さ、余白、背景色、枠線、角丸などを調整できます。スマートフォン・タブレット・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="remember-textarea-content_wrap">
<!-- タイトル -->
<div class="remember-textarea-content_title">
入力内容を記憶するテキストエリア
</div>
<!-- 説明文 -->
<p class="remember-textarea-content_text">
入力した文章はブラウザへ保存されます。
</p>
<!-- 入力項目 -->
<div class="remember-textarea-content_group">
<!-- ラベル -->
<label
class="remember-textarea-content_label"
for="remember-textarea-content">
内容
</label>
<!-- 入力内容を保存するテキストエリア -->
<textarea
id="remember-textarea-content"
class="remember-textarea-content_input"
placeholder="文章を入力してください。"></textarea>
</div>
</div>
<!-- 補足説明 -->
<p class="remember-textarea-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はテキストエリア全体を構成するファイルです。「入力内容を記憶するテキストエリア」のタイトル、説明文、「内容」のラベル、プレースホルダー、補足説明を変更できます。textarea要素へ入力した文章がJavaScriptの保存対象になります。
style.cssはテキストエリア全体のデザインを設定するファイルです。最大横幅、余白、背景色、枠線、角丸、タイトルやラベルの文字サイズ、テキストエリアの高さ、入力文字の行間、フォーカス時の枠線や影などを変更できます。
script.jsは入力内容の保存と復元を行うファイルです。ページ表示時にlocalStorageから保存済みの文章を取得し、データが存在する場合はテキストエリアへ設定します。また、inputイベントを利用して、文字が入力・削除されるたびに現在の内容をlocalStorageへ保存します。
設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを同じ階層で配置します。3つのファイルを保存したあと、sample/index.htmlをブラウザで開いてください。テキストエリアへ文章を入力すると、入力内容がブラウザのlocalStorageへ保存されます。
文章を入力したあとにページを再読み込みするか、別のページへ移動してから戻ると、保存されている内容が自動的にテキストエリアへ復元されます。入力した文字を削除した場合も、その時点の内容へ保存データが更新されます。
保存内容はブラウザ内に保持されるため、同じサイトを別のブラウザや別の端末で開いても自動的には引き継がれません。また、利用者がブラウザのサイトデータを削除した場合は保存された文章も削除されます。
カスタマイズできる内容
index.htmlではタイトル、説明文、ラベル、プレースホルダー、補足説明を変更できます。お問い合わせ内容、備考、メモ、下書きなど、用途に合わせた文章へ変更できます。
style.cssでは全体の最大横幅、余白、背景色、枠線、角丸、テキストエリアの高さ、入力文字の行間、フォーカス時の色や影などを変更できます。resize:vertical;を変更すると、利用者によるテキストエリアの高さ変更方法も調整できます。
script.jsではremember-textarea-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:180px;
テキストエリアの初期高さです。値を大きくすると最初から高く表示され、小さくすると低くなります。
padding:14px 16px;
テキストエリアの内側余白です。14pxは上下、16pxは左右の余白です。値を大きくすると入力文字と枠線の間隔が広がります。
border:2px solid #d1d5db;
テキストエリアの枠線です。2pxを大きくすると枠線が太くなり、小さくすると細くなります。
border-radius:10px;
テキストエリアの角丸です。値を大きくすると丸みが強くなります。
line-height:1.7;
入力文字の行間です。値を大きくすると行間が広がり、小さくすると詰まった表示になります。
transition:0.3s;
フォーカス時に枠線と影が切り替わる時間です。0.3秒で変化し、値を大きくするとゆっくり、小さくすると速く切り替わります。
box-shadow:0 0 0 4px ...
フォーカス時に表示する外側の強調範囲です。4pxを大きくすると影の広がりが大きくなります。
min-height:160px;
画面幅640px以下で使用するテキストエリアの初期高さです。値を変更するとスマートフォン表示時の高さが変わります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:700pxによって、画面幅に合わせてテキストエリア全体が縮小されます。画面幅640px以下ではページ全体の余白を24px 16px、テキストエリア全体の余白を24px 18pxへ変更し、入力欄の初期高さを160pxへ調整しています。スマートフォン・タブレット・PCで利用できます。
コメント