按鈕：表單提交時不激活

一個帶有兩個字段和提交按鈕的簡單表單。提交按鈕的樣式是使用: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

按鈕：表單提交時不激活

回答

相關問題