button:active 提交表单时未应用

Question

我有以下情况。

具有两个字段和一个提交按钮的简单表单。提交按钮的样式使用 :active 伪 class 并在按下时变为红色。

但只有当按钮有焦点时直接点击按钮或按下Space键（仅在Chrome中）才有效。

然而，当使用 Enter 键提交表单时，按钮不会获得其 "active" 状态。即使按钮具有焦点并且您按下 Enter 也不会设置样式。

举个例子：

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

  e.preventDefault();

  document.getElementById("log").innerHTML += "Form submitted<br/>" ;
   
  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> 在这种情况下表现相同

Answer 1

如果您想确保 active state/class 被使用，试试这个：

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

并尝试将其添加到您的 buttonClick 函数中（this 是按钮元素）- 并使用 jQuery。

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

我还发现了一个问题，您可以多次触发提交按钮，如果您不想使用以下方法，请尝试在第一次点击时禁用该按钮：

onclick="this.disabled = true;"

button:active 提交表单时未应用

button:active is not applied when form is submitted

html

css

forms

onsubmit