Question

我有以下情况。

包含两个字段和提交按钮的简单表单。提交按钮使用:active伪类进行样式设置，并在按下时变为红色。

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

然而，当使用回车键提交表单时，该按钮不会使其活动＆＃34;州。即使按钮具有焦点并按下Enter，它也不会被设置样式。

这是一个例子：

＆＃13;

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/>" ;
}

＆＃13;

button {
  background: yellow;
}

button:active {
  background: red;
}

＆＃13;

<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>

＆＃13;

有人可以这样说，因为实际上表单是在没有按下按钮的情况下提交的。但事实并非如此，您可以按照自己喜欢的方式提交表单，按钮本身的点击事件仍会触发。

这是一个错误还是我做错了什么？

注意：<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;"

Answer 2

请参阅link。在这个帖子中讨论了相同的内容，你会更好地理解。

按钮：在提交表单时未应用“有效”

2 个答案: