ページを開いてから指定した時間が経過すると、自動的に入力できなくなるテキストボックスの作り方を紹介します。ページ表示と同時に時間の計測が始まり、制限時間を過ぎると入力欄が無効化され、文字の追加・変更・削除ができなくなります。
時間の計測はページが表示されてから始まり、テキストボックスへのフォーカスや文字入力の有無に関係なく進みます。制限時間内であれば自由に入力できますが、時間が終了すると入力途中でも操作できなくなります。それまでに入力した文字列は消去されず、入力欄にそのまま残ります。
今回のデモでは、ページ表示から3秒後に入力を禁止するテキストボックスを用意しています。残り時間を確認しながら文字を入力でき、「再確認」ボタンを押すと入力欄が初期化され、もう一度動作を試せます。また、入力した文字列はJavaScriptで取得でき、制限時間が終了した後も値を読み取って別の処理に利用できます。
今回は1行入力のテキストフィールドを使用していますが、複数行入力できるテキストエリアにも同じ仕組みを利用できます。制限時間の変更方法やテキストエリアへの変更方法、入力値の取得方法については、下記「ファイル構成と設置方法」で説明します。
デモ
ページを開くと3秒のカウントダウンが始まり、残り時間が0秒になるとテキストボックスへの入力が禁止されます。「再確認」ボタンを押すと入力欄が初期化され、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="textbox-time-limit_container">
<!-- 入力欄のラベル -->
<label class="textbox-time-limit_label" for="textbox-time-limit-input">
メッセージ
</label>
<!-- 指定時間が経過すると入力できなくなるテキストボックス -->
<input class="textbox-time-limit_input" id="textbox-time-limit-input" name="message" type="text" placeholder="3秒以内に入力してください" autocomplete="off">
</div>
<!-- 入力可能な時間を制限するJavaScriptを読み込む -->
<script src="script.js"></script>
</body>
</html>コードをコピーする場合 使用するコードのタブを選び、「このタブをコピー」をクリックすると、現在表示中のコードをコピーできます。 サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
Q ダウンロードしたけど、これをネット上で動かすにはどうするの？
Googleアカウントがあれば、InfinityFreeで無料サーバーを作成して、ダウンロードしたサンプルをネット上で動かせます。
InfinityFreeを初めて利用する場合は①から、すでにサーバーを作成している場合は②へ進んでください。
ファイル構成と設置方法
今回のサンプルは、HTML・CSS・JavaScriptの3つのファイルで構成されています。JavaScriptのsetTimeout()を使用して、ページ表示後に指定した時間が経過するとテキストボックスを無効化します。入力可能な時間はJavaScriptで変更でき、CSSでは入力中と入力禁止後の見た目を設定しています。
sample/
├── index.html
├── style.css
└── script.js
各ファイルの役割
index.htmlには、メッセージを入力するinput要素と項目名を示すlabel要素を配置しています。style.cssでは、入力欄の横幅・余白・枠線・角丸・背景色に加え、入力禁止時の表示を設定しています。script.jsでは、入力可能な時間を指定し、時間経過後に入力欄を無効化する処理を記述しています。
設置方法・使い方
「サンプル一式をダウンロード」をクリックしてZIPファイルを保存し、展開してください。sampleフォルダ内のindex.html・style.css・script.jsを同じ階層に配置します。
index.htmlをブラウザで開くと、メッセージの入力欄が表示されます。初期設定では3秒間入力でき、時間が経過すると入力欄がグレーに変わり、操作できなくなります。もう一度試す場合は、ページを再読み込みしてください。
指定時間が経過すると入力を禁止する仕組み
script.jsでは、document.getElementById()で入力欄を取得し、setTimeout()で指定時間後に実行する処理を登録しています。
// 入力を制限するテキストボックスを取得する
const input = document.getElementById("textbox-time-limit-input");
// 入力可能な時間（秒）
// 3を5に変更すると5秒後、10に変更すると10秒後に入力を禁止する
const timeLimit = 3;
// ページ表示から指定時間が経過したら入力を禁止する
// フォーカスや文字入力の有無に関係なく実行される
setTimeout(() => {
// 入力欄を無効化し、文字の追加・変更・削除を禁止する
input.disabled = true;
}, timeLimit * 1000); // 秒をミリ秒に変換する。1000ミリ秒は1秒
timeLimit = 3は入力可能な時間を秒単位で指定しています。5秒に変更する場合はtimeLimit = 5、10秒に変更する場合はtimeLimit = 10とします。
setTimeout()は、指定した時間が経過した後に処理を実行するJavaScriptの機能です。待機時間にはミリ秒を使用するため、timeLimit * 1000で秒をミリ秒に変換しています。
指定時間が経過するとinput.disabled = true;が実行され、入力欄が無効化されます。disabledは入力内容を削除する処理ではないため、入力済みの文字列は保持されます。
入力禁止後の表示を変更する方法
style.cssでは、:disabledを使用して、無効化されたテキストボックスの外観を変更しています。
/* 制限時間が終了したときの表示 */
.textbox-time-limit_input:disabled {
background: #e5e7eb; /* 入力禁止時の背景色 */
color: #6b7280; /* 入力禁止時の文字色 */
cursor: not-allowed; /* 操作できないことを示すカーソル */
opacity: 1; /* ブラウザ標準の透明度を変更しない */
}
background: #e5e7eb;は入力禁止時の背景色、color: #6b7280;は入力済みの文字色です。それぞれのカラーコードを変更すると、無効化された入力欄の配色を調整できます。
cursor: not-allowed;は操作できない状態をカーソルで示す設定です。opacity: 1;を指定することで、ブラウザによる入力欄全体の透明度の変更を抑えています。
入力した文字列を取得する方法
テキストボックスに入力された文字列は、valueプロパティで取得できます。今回の入力欄にはid="textbox-time-limit-input"を指定しているため、次のJavaScriptで入力内容を変数へ代入できます。
// テキストボックスを取得する
const input = document.getElementById("textbox-time-limit-input");
// 入力された文字列を取得する
const value = input.value;
input.valueで取得される値は文字列（string）です。例えば「こんにちは」と入力されている場合、変数valueには"こんにちは"が入ります。何も入力されていない場合は空文字列""になります。
入力禁止後もvalueプロパティから文字列を取得できます。ただし、取得する時点の値が変数に代入されるため、制限時間が終了した後の内容を取得したい場合は、その時点でinput.valueを読み取る必要があります。
このコードは入力値の取得方法を説明するための例です。実際に利用する場合は、script.js内で入力欄を取得した後に記述し、必要なタイミングで実行してください。
テキストエリアへ変更する方法
複数行入力できるテキストエリアに変更する場合は、index.htmlのinput要素をtextarea要素へ置き換えます。変更前のHTMLは次のとおりです。
<!-- 指定時間が経過すると入力できなくなるテキストボックス -->
<input class="textbox-time-limit_input" id="textbox-time-limit-input" name="message" type="text" placeholder="3秒以内に入力してください" autocomplete="off">テキストエリアに変更する場合は、次のように書き換えます。
<!-- 指定時間が経過すると入力できなくなるテキストエリア -->
<textarea class="textbox-time-limit_input" id="textbox-time-limit-input" name="message" rows="4" placeholder="3秒以内に入力してください" autocomplete="off"></textarea>
textarea要素にはtype="text"を指定しません。rows="4"は表示する行数の目安で、数値を変更すると入力欄の初期の高さを調整できます。
IDを変更しなければ、script.jsはそのまま使用できます。テキストエリアもdisabledプロパティで無効化でき、入力内容はvalueプロパティで取得できます。
テキストエリアの高さを調整し、サイズ変更を縦方向のみに制限する場合は、style.cssの末尾に次のCSSを追加してください。
/* =========================================
テキストエリアへ変更した場合の追加設定
========================================= */
textarea.textbox-time-limit_input {
min-height: 120px; /* 最小の高さ。数値を大きくすると縦に広がる */
resize: vertical; /* 縦方向のみサイズ変更を許可する */
}
min-height: 120px;はテキストエリアの最小の高さです。数値を大きくすると入力欄が縦に広がります。resize: vertical;では縦方向のサイズ変更を許可し、サイズ変更を禁止したい場合はresize: none;に変更します。
レスポンシブ対応
style.cssでは、テキストボックス全体にwidth: 100%;とmax-width: 680px;を設定しています。広い画面では最大680pxまで表示し、狭い画面では設置先の横幅に合わせて縮小します。
また、画面幅が640px以下になると、次のCSSで内側の余白を小さくしています。
/* =========================================
スマートフォン対応
========================================= */
@media (max-width: 640px) {
/* 画面幅640px以下では全体の余白を小さくする */
.textbox-time-limit_container {
padding: 24px 18px; /* 上下24px・左右18pxの内側余白 */
}
/* スマートフォンでは入力欄の余白を調整する */
.textbox-time-limit_input {
padding: 14px; /* 内側の余白 */
}
}
PC表示では全体の内側余白を36px、入力欄の余白を16pxに設定しています。画面幅640px以下では全体の余白を上下24px・左右18px、入力欄の余白を14pxに変更しています。
max-width: 680px;を変更すると全体の最大横幅を調整でき、メディアクエリ内の数値を変更するとスマートフォンでの余白を調整できます。
コメント