html - 提交按钮 'depressed' 焦点状态——潜在的 chrome 错误？

Question

Chrome 中的提交按钮有什么用？

<input type='text' placeholder='Dummy Input'/>
<input type='submit'/>

提交按钮的事件“按下”状态只会在按钮没有有焦点时发生。要重现，请参阅 this JSFiddle .事实上，文本字段甚至不是必需的，只是为了让 tab 聚焦到提交按钮。

所以继续吧，将光标放在文本字段中，按 tab 并在按钮获得焦点(橙色)时单击提交。事件触发，但按钮不会按下。

在获得焦点时按空格键而不是单击将按下按钮。 (thx @Ineentho)什么给了？

注意:我已经 submitted this到 Chrome 问题跟踪器

Answer 1

您可以使用一些 javascript/jquery 取消悬停文本框的焦点，以便在单击时应用 :active 属性。

$("input[type=submit]").hover(function(){
     $(this).blur();
});

此外，您可以将 css 应用于 :focus 伪类，因此轮廓将始终不可见。

input[type=submit]:focus {outline:none;}

请参阅此 fiddle :http://jsfiddle.net/qahcJ/1/

更新

我认为如果没有 Javascript hack 就无法解决这个问题，所以这里有一种更简单的方法。只需使用这段代码:

$("input[type=submit]").bind("mousedown",function(e){
    return false;
});

演示:http://jsfiddle.net/gFMTt/