ボタン：フォームが提出されたときにアクティブは適用されません

Question

私は次のような状況に陥っています。

2つのフィールドと送信ボタンを持つ単純なフォームです。 Submitボタンは、:active疑似クラスを使用してスタイルされ、押されるたびに赤色になります。

ボタンがフォーカスされている場合は、ボタンを直接クリックするか、Spaceキー（Chromeのみ）を押した場合のみ動作します。

ただし、Enterキーを使用してフォームを送信すると、ボタンは「アクティブ」状態になりません。ボタンにフォーカスがあってもEnterを押すと、スタイルされません。ここでは例

：

document.getElementById("form1").addEventListener("submit", function(e) { 
 

 
    e.preventDefault(); 
 

 
    document.getElementById("log").innerHTML += "Form submitted<br/>" ; 
 
\t 
 
    return false; 
 
}); 
 

 
buttonClick = function() { 
 
    document.getElementById("log").innerHTML += "Button clicked<br/>" ; 
 
}

button { 
 
    background: yellow; 
 
} 
 

 
button:active { 
 
    background: red; 
 
}

<form id="form1" > 
 
    First name:<br> 
 
    <input type="text" name="firstname" value="Mickey"> 
 
    <br><br> 
 
    <button type="submit" onclick="buttonClick()">Submit</button> 
 
    <br><br> 
 
    <div id="log"></div> 
 
</form>

一つは、実際にフォームがボタンが押されずに送信されるので、それはだと言うことができます。しかし、それは本当ではない、ボタン自体のクリックイベントが好きな形でフォームを送信することができます。

これはバグですか、何か間違っていますか？

注：<input type="submit">と<button type="submit"></button>あなたがactive状態/クラスが使用されていることを確認したい場合は、この場合に

Answer 1

を同じように振る舞うが、これを試してみてください。

button.active, button:active { 
    // your code goes here 
} 

そして、あなたにこれを追加しようbuttonClick関数（thisはボタン要素） - jQueryが使用されます。

$(this).toggleClass('active'); 

私はまた、あなたが以下であることをしたくない場合は最初のクリックボタンを無効にしよう、送信ボタンを複数回発射することができ、問題認識：

onclick="this.disabled = true;" 

Answer 2

を参照してくださいにlinkにこのスレッドでも同じことが議論されており、より理解しやすくなります。