指定時間後に入力できなくなるテキストボックスを作る方法
指定時間後に入力できなくなるテキストボックスを作る方法を紹介します。このサンプルでは、ページを表示してから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-textbox_wrap">
<!-- タイトル -->
<div class="timed-textbox_title">
3秒後に入力できなくなるテキストボックス
</div>
<!-- 説明文 -->
<p class="timed-textbox_text">
3秒以内であれば自由に文字を入力できます。
</p>
<!-- 入力項目 -->
<div class="timed-textbox_group">
<!-- ラベル -->
<label
class="timed-textbox_label"
for="timed-textbox">
名前
</label>
<!-- テキストボックス -->
<input
id="timed-textbox"
class="timed-textbox_input"
type="text"
name="name"
placeholder="3秒以内に名前を入力してください。">
</div>
<!-- 状態表示 -->
<p
class="timed-textbox_status"
id="timed-textbox-status">
現在は入力できます。
</p>
</div>
<!-- JavaScriptファイル -->
<script src="script.js"></script>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLでテキストボックスやタイトル、説明文、状態表示を作成し、CSSで入力欄や全体のデザインを設定します。JavaScriptではページが表示されてから3秒後にテキストボックスを入力できない状態へ切り替えます。
sample/
├── index.html
├── style.css
└── script.js
各ファイルの役割
index.htmlはテキストボックス全体を構成するファイルです。「3秒後に入力できなくなるテキストボックス」のタイトル、説明文、「名前」のラベル、プレースホルダー、入力状態を知らせる文章を変更できます。
style.cssはテキストボックス全体のデザインを設定するファイルです。横幅、余白、背景色、枠線、角丸、文字サイズ、フォーカス時の影、入力できなくなったときの背景色や文字色などを変更できます。
script.jsは指定時間後にテキストボックスを入力できない状態へ変更するファイルです。setTimeout()で3秒間待機したあと、disabledを有効にして入力を停止し、状態表示を「3秒が経過したため入力できません。」へ変更します。
設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置します。3つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。ページが表示されるとテキストボックスへ文字を入力できる状態で開始します。
ページが表示されてから3秒が経過すると、JavaScriptによってテキストボックスへdisabledが設定され、それ以降は文字を入力できなくなります。同時に入力欄の表示が無効状態のデザインへ変わり、下部の状態表示も「3秒が経過したため入力できません。」へ切り替わります。
カスタマイズできる内容
index.htmlではタイトル、説明文、「名前」のラベル、プレースホルダーを変更できます。入力する内容に合わせて、ユーザー名、キーワード、商品名などのテキストボックスへ変更できます。
style.cssでは全体の最大横幅、余白、背景色、枠線、角丸、入力欄のサイズ、フォーカス時の枠線や影、入力できなくなった状態の背景色や文字色を変更できます。
script.jsでは、テキストボックスを入力できなくするまでの時間と、入力できなくなったあとに表示する文章を変更できます。時間を変更する場合は、setTimeout()の最後に指定している3000を編集します。
数値調整
script.js
3000
テキストボックスを入力できなくするまでの待機時間です。JavaScriptでは1000ミリ秒が1秒なので、3000は3秒を表します。5秒後に入力できなくする場合は5000、10秒後にする場合は10000へ変更します。値を大きくすると入力できる時間が長くなり、小さくすると短くなります。
style.css
max-width:700px;
テキストボックス全体の最大横幅です。値を大きくすると横へ広がり、小さくするとコンパクトになります。
margin:40px auto;
全体の上下余白です。40pxを大きくすると上下の間隔が広がり、小さくすると狭くなります。
padding:32px;
全体の内側余白です。値を大きくすると内容と外枠の間隔が広がります。
border-radius:18px;
全体の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
font-size:22px;
タイトルの文字サイズです。値を大きくするとタイトルが大きく表示され、小さくすると控えめになります。
margin:0 0 24px;
説明文の下側余白です。24pxを大きくすると入力項目との間隔が広がり、小さくすると狭くなります。
gap:10px;
ラベルとテキストボックスの間隔です。値を大きくすると間隔が広がり、小さくすると近くなります。
padding:14px 16px;
テキストボックスの内側余白です。上下の14pxを大きくすると入力欄が高くなり、左右の16pxを大きくすると文字と枠線の間隔が広がります。
border:2px solid #d1d5db;
テキストボックスの枠線です。2pxを大きくすると枠線が太くなり、小さくすると細くなります。
border-radius:10px;
テキストボックスの角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
transition:0.3s;
枠線、影、背景色が切り替わる時間です。0.3秒で変化します。値を大きくするとゆっくり、小さくすると速く切り替わります。
box-shadow:0 0 0 4px ...
テキストボックスへフォーカスしたときに表示する外側の強調範囲です。4pxを大きくすると影が広がり、小さくすると控えめになります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:700pxによって、画面幅に合わせてテキストボックス全体が縮小されます。また、640px以下ではページ全体をpadding:24px 12px;、テキストボックス全体をpadding:24px 18px;へ変更しているため、スマートフォン・タブレット・PCで利用できます。
コメント