html - 按钮 :active is not applied when form is submitted

Question

我有以下情况。

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

但它只有在直接点击按钮或 Space 时才有效当按钮具有焦点时按下键(仅在 Chrome 中)。

但是，当使用 Enter 键提交表单时，按钮不会获​​得其“事件”状态。即使按钮有焦点并且您按下 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 状态/类被使用，试试这个:

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

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

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

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

onclick="this.disabled = true;"