如何在JavaScript中阻止按钮标签状态的默认状态 [英] How to style a button tabbed state when its default behviour is prevented in Javascript

问题描述

在这个例子中，有一个标签为tab的按钮，而css与其他按钮不同（看起来被禁用）。我希望该按钮的边框为黑色，同时按下按钮或像其他按钮一样选中。我知道这是因为e.preventDefault（）;但如果我删除它我的功能停止。

有没有办法解决这个问题？

见小提琴 demo

HTML：

 < div class =wrapper> 
< input type =buttonclass =tabvalue =Tab/> 
< input type =textclass =ans1style =border-color：black> 
< div class =def1>< i>数百个< / i>< / div> 
< input type =textclass =ans2style =border-color：black> 
< div class =def2>< i> Tens< / i>< / div> 
< input type =textclass =ans3style =border-color：＃000;> 
< div class =def3>< i> Ones< / i>< b style =margin-left：30px;>< / b> < / DIV> 
< input type =textclass =ans4style =border-color：＃000;> 
< input type =buttonclass =numid =onevalue =1/> 
< input type =buttonclass =numid =twovalue =2/> 
< input type =buttonclass =numid =threevalue =3/> 
< input type =buttonclass =numid =fourvalue =4/> 
< input type =buttonclass =numid =fivevalue =5/> 
< input type =buttonclass =numid =sixvalue =6/> 
< input type =buttonclass =numid =sevenvalue =7/> 
< input type =buttonclass =numid =eightvalue =8/> 
< input type =buttonclass =numid =ninevalue =9/> 
< input type =buttonclass =numid =zerovalue =0/> 
< input type =buttonclass =clearvalue =Clear/> 
< input type =buttonclass =deletevalue =Back/> 
< input type =buttonclass =tabvalue =Tab/> 
< / div> 
  

---

解决方案

在你的CSS中，按照你的想法来设计它。 ：active 是一个伪选择器，用于选择按钮是否处于活动状态。 I.E.当它位于 mousedown 状态时。

  .tab：active { 
 border：1px纯黑色; 
 
 $ / code> 

虽然你可以按照你的意愿操纵它。 >



---





为了在鼠标下方设置所有按钮的样式，您可以使用类似于：

  input [type =button]：active {/ * mousedown上的所有输入按钮* / 
 outline：0; / *从所有* / 
中删除默认轮廓border：1px纯色粉红色; / *添加你想要的样式* / 
} 
  

DEMO

---

在看过firefox之后，我发现它不喜欢在'mousedown'事件处理器上使用e.preventDefault（），同时保持'active'css。将它改为'click'事件允许Firefox接受按钮作为按钮输入，因此可以这样使用：

  $（'。tab'）。on（'click'，function（e）{/ *此位已更改* / 
 e.preventDefault（）; 
 ... 
 .. 。
}）; 
  

In the example there is a button labeled "tab" and the css is not the same as other buttons (it seems disabled). I want the borders of that button to be black while key down or tabbed like other buttons. I know it is because of e.preventDefault(); but if i am removing it my functionality stops.

Is there a way around this?

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

---

解决方案

In your css, style it as you want. The :active is a pseudo selector to select on whether the button is 'active'. I.E. When it is in a mousedown state.

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

Although you can fiddle with this to style it as you wish.

---

To style 'all buttons' on mouse down, you could use something like:

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

---

After reading up on firefox, I found that it doesn't like the e.preventDefault() being used on a 'mousedown' event handler, whilst maintaining an 'active' css. Changing this to a 'click' event allows Firefox to accept the button as a button input, and hence can be used as such:

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

这篇关于如何在JavaScript中阻止按钮标签状态的默认状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！