如何在Javascript中阻止默认按钮时设置按钮标签状态
在此示例中,有一个标签为“选项卡”的按钮,并且css与其他按钮不同(看起来禁用)。我希望该按钮的边框为黑色,同时按下按钮或像其他按钮一样选中。我知道这是因为e.preventDefault();但如果我删除它,我的功能会停止。如何在Javascript中阻止默认按钮时设置按钮标签状态
有没有办法解决?
见小提琴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>
在你的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*/
}
在Firefox阅读后,我发现它不喜欢在'mousedown'事件处理函数上使用e.preventDefault(),同时保持'active'css。改变这对一个“点击”事件允许火狐接受按钮作为按钮输入,并因此可以用作例如:
$('.tab').on('click', function (e) { /*THIS BIT CHANGED*/
e.preventDefault();
...
...
});
没有其不起作用 – 2015-02-10 09:52:30
选项卡按钮与单击边框颜色时其他按钮的颜色变化不同,除了选项卡按钮 – 2015-02-10 09:57:54
@ jbutler483以外,所有按钮都变成粉红色了。我正在尝试从早上使用它,但没有用处,可以帮助我。 – 2015-02-10 09:59:13
小提琴是http://jsfiddle.net/t4ce2jtu/16/ – 2015-02-10 09:36:36