指定時間後に押せなくなるボタンを作る方法
指定時間後に押せなくなるボタンを作る方法を紹介します。このサンプルでは、ページを表示してから3秒間はボタンを押すことができ、3秒が経過すると自動的にボタンを無効化して押せない状態へ切り替えます。一定時間だけ操作を受け付け、その後は操作できないようにしたい場合に利用できるシンプルな実装です。
申込や回答などの操作を一定時間だけ受け付けたい場合や、時間経過後に特定の操作を禁止したい場合などに活用できます。JavaScriptでページ表示からの経過時間を計測し、指定時間が経過するとボタンへdisabled属性を設定するため、見た目だけではなく実際にクリックできない状態へ変更できます。
ボタンの文字、背景色、文字色、サイズ、余白、角丸などはHTMLとCSSから変更できます。また、ボタンを押せなくするまでの待機時間はJavaScriptの数値を変更するだけで調整できます。レスポンシブ対応のため、スマートフォン・タブレット・PCでも利用しやすいサンプルです。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
ページ表示から3秒後にボタンが押せなくなります。「もう一度確認」をクリックすると最初の状態へ戻り、再び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="disable-button-time_wrap">
<!-- タイトル -->
<div class="disable-button-time_title">
3秒後に押せなくなるボタン
</div>
<!-- 説明文 -->
<p class="disable-button-time_text">
3秒以内であればボタンを押すことができます。
</p>
<!-- 操作ボタン -->
<button
type="button"
class="disable-button-time_button"
data-disable-button>
ボタン
</button>
<!-- 状態表示 -->
<p
class="disable-button-time_status"
data-disable-status>
現在は押すことができます。
</p>
</div>
<!-- JavaScriptファイル -->
<script src="script.js"></script>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLではボタン、説明文、現在の操作状態を表示するメッセージを作成します。CSSではボタンの色、余白、角丸、無効時の見た目などを設定し、JavaScriptではページ表示から3秒後にボタンを押せない状態へ切り替えます。
ページを開いてから3秒間は通常のボタンとして操作できます。3秒が経過するとJavaScriptによってボタンのdisabledが有効になり、それ以降はクリックできなくなります。同時に状態表示も「3秒が経過したため押すことができません。」へ変更されます。
ボタンを押せなくするまでの時間はJavaScriptの数値から変更できます。HTMLではタイトルや説明文、ボタンの文字を変更でき、CSSでは通常時と無効時のデザインを用途に合わせて調整できます。
sample/
├── index.html
├── style.css
└── script.js
各ファイルの役割
index.htmlはボタン全体を構成するファイルです。「3秒後に押せなくなるボタン」のタイトル、説明文、「ボタン」の文字、初期状態の「現在は押すことができます。」というメッセージを変更できます。
style.cssはボタン全体のデザインを設定するファイルです。全体の最大横幅、余白、背景色、枠線、角丸、ボタンのサイズや色、無効時の背景色や文字色などを変更できます。
script.jsは指定時間後にボタンを押せなくするファイルです。ページ表示から3秒後にdisabledを有効にし、同時に状態表示を「3秒が経過したため押すことができません。」へ変更します。
設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置します。3つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。
ページを表示してから3秒間はボタンを押すことができます。3秒が経過するとボタンが無効状態へ切り替わり、それ以降はクリックできなくなります。
カスタマイズできる内容
index.htmlではタイトル、説明文、ボタンの文字、状態表示の文章を変更できます。用途に合わせて申込、送信、確定などのボタンへ変更できます。
style.cssでは全体の横幅、余白、背景色、角丸、ボタンの大きさ、背景色、文字色、無効時の背景色や文字色などを変更できます。
script.jsではsetTimeout()に指定している3000を変更することで、ボタンを押せなくするまでの時間を変更できます。
数値調整
script.js
3000
ページを表示してからボタンを押せなくするまでの待機時間です。JavaScriptでは1000ミリ秒が1秒なので、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;
タイトルの文字サイズです。値を大きくするとタイトルが大きく表示されます。
margin:0 0 24px;
説明文の下側余白です。24pxを大きくするとボタンとの間隔が広がり、小さくすると狭くなります。
padding:14px 28px;
ボタンの内側余白です。上下の14pxを大きくするとボタンが高くなり、左右の28pxを大きくすると横へ広がります。
border-radius:10px;
ボタンの角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
font-size:16px;
ボタンの文字サイズです。値を大きくすると文字が大きくなり、小さくすると小さくなります。
margin:20px 0 0;
状態表示とボタンの間隔です。20pxを大きくすると間隔が広がり、小さくすると狭くなります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:700pxによって、画面幅に合わせて全体が縮小されます。また、画面幅640px以下ではbodyの余白を24px 12px、ボタン全体の余白を24px 18pxへ変更しているため、スマートフォン・タブレット・PCで利用できます。
コメント