1. TOP
  2. プログラミング
  3. ボタンの2重クリックや連打を防止するJavaScript

ボタンの2重クリックや連打を防止するJavaScript

 2019/04/02 プログラミング
この記事は約 4 分で読めます。 1,373 Views

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”]に変更しても機能します。

ボタンクリック時にローディングに切り替え

クリックされるとボタンを非表示にすると共に、ローディング中とわかるgifアニメーション画像に切り替えます。

HTML

CSS

JavaScript

ボタンクリック時にボタンをdisabled状態に切り替え

クリックされるとボタンをdisabled状態に切り替えます。
ボタンが半透明になりボタンとしての機能が使用禁止状態となります。

HTML

JavaScript

ボタンクリック時にローディングに切り替え、一定時間後に元に戻す

先ほどはページ遷移するまでローディング中の表示になりっぱなしですが、一定時間後にボタン表示に戻すJavaScriptです。

HTML

CSS

JavaScript

フォーム送信時にローディング表示に切り替え

先ほどはボタンクリックでローディング中の表示に切り替えでしたが、今回はフォーム送信時にローディング中の表示に切り替えでをします。

HTML

CSS

JavaScript

まとめ

いかがだったでしょうか。

ローディング表示や半透明にしてボタンを押せなくすることで、サイト管理側のストレスも軽減しますが
ユーザー側でも感覚的に送信中ということがわかるので、ユーザー側でもストレスが軽減されます。

ぜひごご活用ください。

制作のご依頼・ご相談はこちら

dainamoでは魅力的なWEBサイトや、アプリ、ツール、ポスター、パンフレット、チラシなど幅広く承っております。ご相談、見積もり、お問い合わせなど、お気軽にご連絡ください。

今すぐご相談・問い合わせをする

\ SNSでシェアしよう! /

web制作・デザイン・システム開発・管理なら dainamo(ダイナモ)の注目記事を受け取ろう

この記事が気に入ったら
いいね!しよう

web制作・デザイン・システム開発・管理なら dainamo(ダイナモ)の人気記事をお届けします。

  • 気に入ったらブックマーク! このエントリーをはてなブックマークに追加
  • フォローしよう!

ライター紹介 ライター一覧

エリー

エリー

dainamoで企画・デザイン・ライティング・マーケティングを担当。小さい頃から絵を描くのが好きでデザイナーへ。現在はモノづくり、コトづくり、ヒトづくりでクライアントや世の中により良い影響を与えることが目標。趣味は絵、カメラ、旅行、アウトドア。

この人が書いた記事  記事一覧

  • ボタンの2重クリックや連打を防止するJavaScript

  • IoT時代のデザインはどうあるべきか

  • コピペでOK!ブラウザの戻るボタンを禁止する方法[ jQuery / javascript ]

  • [EC-CUBE 3.0]商品購入画面でお届け日とお届け時間を非表示にする方法

関連記事

  • エンジニアが知っておきたい、キャリアパスの種類と特徴

  • Apacheのバージョン情報を隠してセキュリティを向上させる

  • WordPressを簡単にhttps化するReally Simple SSLプラグインの使い方

  • VPSサーバーの構築 第1回 CentOS7 apache MariaDB PHP7 2018

  • Linuxのプロンプトの色をユーザーによって切り分ける

  • VPSサーバーの構築 第6回 CentOS7 apache MariaDB PHP7 2018