簡単！ CSSのafter（擬似クラス）でフォームの二重送信を防ぐ方法 | CSS | Web関連

2018/02/22

Category :

Tags :

フォーム

CSSのの疑似要素のbeforeとafterを使いサイトの印象を少しリッチにする方法。其の2。

ボタンにカバーをつける

カバーをつけるとは下記の図のような状態です。

CSSでカバーをつけることでボタンがクリック出来ない状態を作ります。
空のdivでも実現可能ですが極力空のdivは使用したくないのでafter、before要素で作成します。
カバーをつけることによりJavaScriptでボタンイベントを制御する必要がなくなり（on,offしなくてよい）

フォームの送信（確認）ボタンを2度押し出来ないようにできます。

二重送信防止対応策ではdisabled属性での対応も出来ますがおそらくこのやり方が一番単純で簡単かと思います。

初期状態

カバーがついているのでボタンクリックできません。

カバーがなくなった状態

カバーがないのでボタンクリックできます。
単純にこれだけです。

サンプルを見る

<div id="jsLinkBtn" class="link-btn link-btn-square link-btn-cover mb-20"><a href="#"><span>四角ボタン</span></a></div>
<div id="jsSubmitBtn" class="link-btn link-btn-circle link-btn-cover mb-30"><button type="submit" name="submitConfirm" value="confirm">確認画面へ</button></div>

HTMLは超絶悶絶シンプル。
ポイントはa,button要素の上のdivのafter または before要素でカバーを作成する事です。

※少しspanなどがあり入れ子気味ですが高さを固定して中央にテキストを配置したかったからで適宜変更してください。
※link-btn-square,link-btn-circleでデザイン変更可能です。
button要素でsubmitボタンを作成する事でaタグと同様の扱いが出来ます。

/************************************
form
*************************************/

/*
reset
***********************/

/* 必要な分だけ初期化してください */
button,
input[type="checkbox"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    appearance: none;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    border-radius: 0;
    border: none;
    outline: 0;
    margin: 0;
    background: #fff;
}

/* カーソル　指マークに */
button {
    cursor: pointer;
}

.link-btn {
    position: relative;
}

/* アニメーション用背景色 */
.link-btn:after {
    position: absolute;
    display: block;
    content: '';
    width: 100%;
    height: 100%;
    background: #fff;
    top: 0;
    left: 0;
    z-index: 1;
}

/* ここがカバーになります */
.link-btn.link-btn-cover::before {
    position: absolute;
    display: block;
    content: '';
    width: 100%;
    height: 100%;
    background: #fff;
    opacity: 0.5;
    top: 0;
    left: 0;
    z-index: 5; /* 最前面に */
}

/* OK状態になるとカバーを削除 */
.link-btn.state-remove-cover::before {
    display: none;
}

/* フォーム送信時 二重送信防止対応策ため表示するが透明度は0に */
.link-btn.state-submit::before {
    display: block;
    opacity: 0;
}

/* ここからはボタンのデザイン　お好みで変更　読み飛ばしてOK */
.link-btn button,
.link-btn a {
    position: relative;
    z-index: 2;
    display: table;
    width: 100%;
    height: 100%;
    transition: opacity 0.3s ease;
    background: #111;
    color: #fff;
    font-size: 14px;
    font-size: 1.4rem;
    text-align: center;
}

.link-btn button:hover,
.link-btn a:hover {
    -webkit-opacity: 0.8;
    -moz-opacity: 0.8;
    -ms-opacity: 0.8;
    opacity: 0.8;
}

.link-btn button span,
.link-btn a span {
    display: table-cell;
    vertical-align: middle;
}

.link-btn.link-btn-square {
    width: 200px;
    height: 40px;
}

.link-btn.link-btn-circle {
    width: 120px;
    height: 120px;
}

.link-btn.link-btn-circle::after {
    width: 118px;
    height: 118px;
    top: 1px;
    left: 1px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    border-radius: 50%;
    overflow: hidden;
}

.link-btn.link-btn-circle button,
.link-btn.link-btn-circle a {
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    border-radius: 50%;
    overflow: hidden;
}

※ベンダープレフィックスは任意で入れて下さい。

$(function() {

    $('[name=checkLink]').on('change', function() {

        var c = $('[name=checkLink]:checked').prop('value')
        if (c==1) {
            $('#jsLinkBtn').addClass('state-remove-cover');
        }else{
            $('#jsLinkBtn').removeClass('state-remove-cover');
        }

    });

    $('[name=checkSubmit]').on('change', function() {

        var c = $('[name=checkSubmit]:checked').prop('value')
        if (c==1) {
            $('#jsSubmitBtn').addClass('state-remove-cover');
        }else{
            $('#jsSubmitBtn').removeClass('state-remove-cover');
        }

    });

    $('[name=submitConfirm]').on('click', function() {

        alert('送信（確認）完了 二重送信防止対応策で2度とクリック出来ません。')

        $('#jsSubmitBtn').addClass('state-submit');

    });

});

状態の変更を取得してaddClass、removeClassでカバーをつけたり外したりするだけです。
なんらかの方法で二重送信防止対応策は施した方がいいので一度お試しください。

隣の席の二重送信防止対応策で悩んでいる可愛いWeb女子に教えて君もモテモテだ！

※ソースの流用、改変は自由ですが自己責任とさせていただきます。

トラックバック URL

https://keprate.com/web/css/css-after-cover/trackback/