如何在Javascript中阻止默認按鈕時設置按鈕標籤狀態

Question

在此示例中，有一個標籤爲「選項卡」的按鈕，並且css與其他按鈕不同（看起來禁用）。我希望該按鈕的邊框爲黑色，同時按下按鈕或像其他按鈕一樣選中。我知道這是因爲e.preventDefault（）;但如果我刪除它，我的功能會停止。

有沒有辦法解決？

見小提琴demo

HTML：

<div class="wrapper"> 
<input type="button" class="tab" value="Tab"/> 
<input type="text" class="ans1" style="border-color:black"> 
<div class="def1"><i>Hundreds</i></div> 
<input type="text" class="ans2" style="border-color:black"> 
<div class="def2"><i>Tens</i></div> 
<input type="text" class="ans3" style="border-color:#000;"> 
<div class="def3"><i>Ones </i><b style="margin-left:30px;"></b> </div> 
<input type="text" class="ans4" style="border-color:#000;"> 
<input type="button" class="num" id="one" value="1" /> 
<input type="button" class="num" id="two" value="2" /> 
<input type="button" class="num" id="three" value="3" /> 
<input type="button" class="num" id="four" value="4" /> 
<input type="button" class="num" id="five" value="5" /> 
<input type="button" class="num" id="six" value="6" /> 
<input type="button" class="num" id="seven" value="7" /> 
<input type="button" class="num" id="eight" value="8" /> 
<input type="button" class="num" id="nine" value="9" /> 
<input type="button" class="num" id="zero" value="0" /> 
<input type="button" class="clear" value="Clear"/> 
<input type="button" class="delete" value="Back"/> 
<input type="button" class="tab" value="Tab"/> 
</div> 

---

Answer 1

在你的CSS，風格作爲你想要的。 :active是一個僞選擇器，用於選擇該按鈕是否「有效」。 I.E.當它處於mousedown狀態時。

.tab:active{ 
    border:1px solid black; 
} 

雖然你可以隨意擺弄這種風格，如你所願。

---

爲了風格上的鼠標 '所有按鈕' 下，你可以使用類似：

input[type="button"]:active{ /*all input buttons on mousedown */ 
    outline:0;     /*remove default outline from all*/ 
    border:1px solid pink;  /*add styling as you wish*/ 
} 

DEMO

---

在Firefox閱讀後，我發現它不喜歡在'mousedown'事件處理函數上使用e.preventDefault（），同時保持'active'css。改變這對一個「點擊」事件允許火狐接受按鈕作爲按鈕輸入，並因此可以用作例如：

$('.tab').on('click', function (e) {  /*THIS BIT CHANGED*/ 
    e.preventDefault(); 
    ... 
    ... 
});