指定時間後に入力できなくなるテキストエリアを作る方法
指定時間後に入力できなくなるテキストエリアを作る方法を紹介します。このサンプルでは、ページを表示してから3秒間はテキストエリアへ自由に文章を入力でき、3秒が経過するとJavaScriptでテキストエリアを自動的に無効化して、それ以降は入力や編集ができない状態へ切り替えます。
制限時間を設けた入力フォームや、一定時間だけ編集を受け付ける入力欄などに利用できます。入力可能な間は通常のテキストエリアとして操作でき、指定時間が経過すると入力欄が無効状態へ変化するため、現在入力できる状態なのかを見た目でも確認できます。
HTMLではタイトル、説明文、ラベル、プレースホルダーを変更でき、CSSでは横幅、高さ、余白、背景色、枠線、角丸などを調整できます。JavaScriptの待機時間を変更すれば、3秒以外の時間で入力を無効化することもできます。レスポンシブにも対応しているため、スマートフォン・タブレット・PCで利用できます。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
3秒以内であれば自由に文章を入力できます。
現在は入力できます。
コードをコピーして使おう！
<!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="timed-textarea_wrap">
<!-- タイトル -->
<div class="timed-textarea_title">
3秒後に入力できなくなるテキストエリア
</div>
<!-- 説明文 -->
<p class="timed-textarea_text">
3秒以内であれば自由に文章を入力できます。
</p>
<!-- 入力項目 -->
<div class="timed-textarea_group">
<!-- ラベル -->
<label
class="timed-textarea_label"
for="timed-textarea">
内容
</label>
<!-- テキストエリア -->
<textarea
id="timed-textarea"
class="timed-textarea_input"
name="message"
placeholder="3秒以内に文章を入力してください。"></textarea>
</div>
<!-- 状態表示 -->
<p
class="timed-textarea_status"
id="timed-textarea-status">
現在は入力できます。
</p>
</div>
<!-- JavaScriptファイル -->
<script src="script.js"></script>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLではテキストエリア、ラベル、説明文、現在の入力状態を表示するメッセージを作成します。CSSではテキストエリア全体の横幅や余白、枠線、角丸、入力可能時と無効時の見た目などを設定します。
JavaScriptでは、ページを表示した時点から3秒を計測し、3秒が経過するとテキストエリアへdisabledを設定して入力できない状態へ変更します。同時に、状態表示も「3秒が経過したため入力できません。」へ切り替えます。
3秒が経過するまでは通常のテキストエリアとして文章を入力できます。時間経過後は、それまで入力した内容を残したまま新しい文字の入力や編集ができなくなります。
sample/
├── index.html
├── style.css
└── script.js
各ファイルの役割
index.htmlはテキストエリア全体を構成するファイルです。「3秒後に入力できなくなるテキストエリア」のタイトル、説明文、「内容」のラベル、プレースホルダー、初期状態の「現在は入力できます。」というメッセージを変更できます。
style.cssはテキストエリアのデザインを設定するファイルです。全体の最大横幅、余白、背景色、枠線、角丸、テキストエリアの高さ、入力文字の行間、フォーカス時の色や影、無効時の背景色や文字色などを変更できます。
script.jsは指定時間後にテキストエリアを入力できなくするファイルです。ページ表示から3秒後にdisabledを有効にし、状態表示の文章も入力できないことが分かる内容へ変更します。
設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置します。3つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。
ページを開いてから3秒間はテキストエリアへ自由に文章を入力できます。3秒が経過するとテキストエリアが無効になり、その時点から新しい文字の入力や既存内容の編集ができなくなります。時間経過前に入力した文章はそのまま残ります。
カスタマイズできる内容
index.htmlではタイトル、説明文、ラベル、プレースホルダー、状態表示の初期メッセージを変更できます。name="message"も、実際のフォーム内容に合わせて変更できます。
style.cssでは全体の横幅、余白、背景色、枠線、角丸、テキストエリアの高さ、文字サイズ、行間、フォーカス時の枠線や影、無効時の背景色や文字色などを変更できます。
script.jsではsetTimeout()に指定している3000を変更することで、テキストエリアを入力できなくするまでの時間を変更できます。
数値調整
script.js
3000
ページを表示してからテキストエリアを入力できなくするまでの待機時間です。3000は3秒を表します。
1000 → 1秒後
3000 → 3秒後
5000 → 5秒後
10000 → 10秒後
例えば5秒間入力できるようにしたい場合は、script.jsの3000を5000へ変更します。値を大きくすると入力できる時間が長くなり、小さくすると早く入力できなくなります。
style.css
max-width:700px;
テキストエリア全体の最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。
margin:40px auto;
全体の上下余白です。40pxを大きくすると上下の間隔が広がり、小さくすると狭くなります。
padding:32px;
全体の内側余白です。値を大きくすると内容と外枠の間隔が広がり、小さくすると狭くなります。
border-radius:18px;
全体を囲む部分の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
font-size:22px;
タイトルの文字サイズです。値を大きくするとタイトルが大きく表示され、小さくすると控えめになります。
gap:10px;
ラベルとテキストエリアの間隔です。値を大きくすると間隔が広がり、小さくすると近くなります。
min-height:180px;
テキストエリアの初期高さです。値を大きくすると最初から高く表示され、小さくすると低くなります。
padding:14px 16px;
テキストエリアの内側余白です。上下の14pxを大きくすると入力欄が高くなり、左右の16pxを大きくすると文字と枠線の間隔が広がります。
border:2px solid #d1d5db;
通常時のテキストエリアの枠線です。2pxを大きくすると枠線が太くなり、小さくすると細くなります。
border-radius:10px;
テキストエリアの角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
line-height:1.7;
入力文字の行間です。値を大きくすると行間が広がり、小さくすると詰まった表示になります。
box-shadow:0 0 0 4px rgba(37,99,235,.12);
テキストエリアを選択しているときの外側の強調表示です。4pxを大きくすると影の範囲が広がり、小さくすると控えめになります。
transition:border-color .3s ease, box-shadow .3s ease, background-color .3s ease;
枠線、影、背景色が切り替わる時間です。0.3秒で変化します。値を大きくするとゆっくり、小さくすると速く切り替わります。
margin:16px 0 0;
状態表示とテキストエリアの間隔です。16pxを大きくすると間隔が広がり、小さくすると狭くなります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:700pxによって、画面幅に合わせて全体の横幅が縮小されます。
また、画面幅640px以下ではbodyの余白を24px 12px、テキストエリア全体の余白を24px 18pxへ変更しています。テキストエリア自体もwidth:100%で親要素の横幅に合わせて縮小されるため、スマートフォン・タブレット・PCで利用できます。
コメント