ボタンの2重クリックや連打を防止するJavaScript
a、input[type=”submit”]、input[type=”image”]、input[type=”image”]、button
などなど、ボタン機能のあるものを2重クリックや連打されてしまい、2重決済などの問題がおこってめんどくさい！
という場合にjQueryのメソッドを使って2重クリックや連打を禁止する方法をいくつかご紹介します。
サンプルコードは<button>で紹介していますが、a、input[type=”submit”]、input[type=”image”]、input[type=”image”]に変更しても機能します。
Contents
ボタンクリック時にローディングに切り替え
クリックされるとボタンを非表示にすると共に、ローディング中とわかるgifアニメーション画像に切り替えます。
HTML
|
1 2 3 4 |
<button class="btn">送信</button> <div class="loading"> <img src="loading.gif"> </div> |
CSS
|
1 2 3 |
.loading { display: none; } |
JavaScript
|
1 2 3 4 5 6 |
$(function() { $('.btn').on('click', function() { $('.btn').hide(); $('.loading').show(); }); }); |
ボタンクリック時にボタンをdisabled状態に切り替え
クリックされるとボタンをdisabled状態に切り替えます。
ボタンが半透明になりボタンとしての機能が使用禁止状態となります。
HTML
|
1 |
<button class="btn">送信</button> |
JavaScript
|
1 2 3 4 5 |
$(function() { $('.btn').on('click', function() { $('.btn').prop('disabled', true); }); }); |
ボタンクリック時にローディングに切り替え、一定時間後に元に戻す
先ほどはページ遷移するまでローディング中の表示になりっぱなしですが、一定時間後にボタン表示に戻すJavaScriptです。
HTML
|
1 2 3 |
<form> <button class="btn">送信</button> </form> |
CSS
|
1 2 3 |
.loading { display: none; } |
JavaScript
|
1 2 3 4 5 6 7 8 9 10 11 12 |
$(function() { $('.btn').on('click', function() { $('.btn').hide(); $('.loading').show(); // 3秒後に元に戻す setTimeout(function() { $('.btn').show(); $('.loading').hide(); }, 3000); }); }); |
フォーム送信時にローディング表示に切り替え
先ほどはボタンクリックでローディング中の表示に切り替えでしたが、今回はフォーム送信時にローディング中の表示に切り替えでをします。
HTML
|
1 2 3 |
<form action="#"> <button class="btn">送信</button> </form> |
CSS
|
1 2 3 |
.loading { display: none; } |
JavaScript
|
1 2 3 4 5 6 |
$(function() { $('form').on('submit', function() { $('.btn').hide(); $('.loading').show(); }); }); |
まとめ
いかがだったでしょうか。
ローディング表示や半透明にしてボタンを押せなくすることで、サイト管理側のストレスも軽減しますが
ユーザー側でも感覚的に送信中ということがわかるので、ユーザー側でもストレスが軽減されます。
ぜひごご活用ください。
制作のご依頼・ご相談はこちら
dainamoでは魅力的なWEBサイトや、アプリ、ツール、ポスター、パンフレット、チラシなど幅広く承っております。ご相談、見積もり、お問い合わせなど、お気軽にご連絡ください。
＼ SNSでシェアしよう！ ／
web制作・デザイン・システム開発・管理なら dainamo（ダイナモ）の注目記事を受け取ろう
− web制作・デザイン・システム開発・管理なら dainamo（ダイナモ）
この記事が気に入ったら
いいね！しよう
web制作・デザイン・システム開発・管理なら dainamo（ダイナモ）の人気記事をお届けします。
-
気に入ったらブックマーク！
- フォローしよう！ Follow @dainamo_jp
