按钮：表单提交时不激活

一个带有两个字段和提交按钮的简单表单。提交按钮的样式是使用: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>表现同样在这种情况下

来源

2017-04-16 Andrej

注意：在具有多按钮鼠标的系统上，CSS 3指定：活动伪类只能应用于主按钮;在右手小鼠上，这通常是最左边的按钮。资料来源：https：//developer.mozilla.org/en/docs/Web/CSS/:active – floor

'active'只有... well * active * while * mousedown *表示用户启动按下鼠标按钮之间的时间向下以及释放鼠标按钮的时间。 Keydown是基于用户按下一个键时的不同事件。 http://stackoverflow.com/a/32485497/2813224 – zer00ne

@floor在我的理解中，CSS Level 3规范（第6.6.1.2节）只说非主鼠标按钮不能激活按钮，也不能禁止其他方式即使您有鼠标：“在具有多个鼠标按钮的系统上，：活动仅适用于主或主激活按钮（通常为”左“鼠标按钮）及其任何别名。” （https://drafts.csswg.org/selectors-3/#useraction-pseudos）但是很显然，Firefox的确如你所引用的那样。 – Andrej

如果你想确保active状态/类是用来试试这个：

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

并尝试在添加此您buttonClick函数（this是按钮元素） - 并使用jQuery。

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

我也认识到，你可以解雇提交按钮多次尝试禁用第一个点击按钮，如果你不想的问题，与以下内容：

onclick="this.disabled = true;"

来源

2017-04-16 18:05:27 Felix

是的，它看起来像手工做是唯一的解决方案。 – Andrej

参考到link。在这个线程中讨论同样的问题，你会更好地理解。

来源

2017-04-16 18:14:55

按钮：表单提交时不激活

回答

相关问题