如何取消提交按钮的焦点

Question

我该如何取消提交按钮的焦点？我不知道为什么它一开始就在那里，而且看起来很丑陋。以下是屏幕截图：

这是应该的外观，当我点击旁边并悬停它时，它恢复了它的外观。

- ant

Answer 1

这个有效：

var selectedInput = null;
$(document).ready(function() {
    $('input, textarea, select').focus(function() {
        this.blur();
    });
});

- ant

---

请注意，通过在任何焦点上模糊按钮，您将无法通过按下按钮来提交表单，这是大多数人期望的标准行为。如果您担心视觉效果，为什么不尝试按照我所说的去除轮廓，并保留焦点呢？ - Brian Moeskau

@bmoeskau 它不能在删除元素时工作，是的，我也想禁用回车键提交。 - ant

这不应该是一个被接受的答案。你永远不应该从任何元素中移除焦点（例如，这会破坏键盘导航）。这可以很容易地通过CSS移除，但你也应该提供其他形式的反馈（例如，当你移除一个轮廓时，你改变了背景）。https://www.a11yproject.com/posts/2013-01-25-never-remove-css-outlines/ - dczajkowski

Answer 2

如果您在标记中使用的是<a>（无论具有焦点的是什么），请在按钮的CSS或其封闭的<a>中尝试此操作（参考）：

outline:0 none;

记住，独特的焦点样式是一项有价值的无障碍/可用性功能，因此您应该提供一些更符合您审美的备用焦点提示，而不是完全删除它。

- Brian Moeskau

---

我正在使用按钮而不是锚标签。 - ant

请停止使用“-moz-outline”；自Firefox 1.5以来，已支持“outline”。+1 对于辅助功能的提醒。 - janmoesen

另请参见：https://dev59.com/rHVD5IYBdhLWcg3wJIEK - janmoesen

Answer 3

In your body or form...

<form onready="document.getElementById('submit').blur();">
...
<input type="submit" id="submit" />
</form>

- casraf

---

我已经尝试过类似的东西，但这也不能正常工作，伙计。 - ant

Answer 4

您可以将按钮编码为：

<button onClick='this.form.submit()'>Button Text</button>

这将删除代码的“提交”功能，从而解决焦点问题。

- cbmckay

Answer 5

表单中的第一个提交按钮始终处于“焦点”状态，因此，当您按下回车键时，表单将被提交。

请参阅类似帖子的响应：停止IE突出显示表单中的第一个提交按钮。

- naivists

---

@naivists 相反，在IE中它运行良好，而firefox则是焦点。 - ant

很可能，Mozilla 正试图实现 HTML5，这就是你看到的。当然，你可以创建一个简单的 JavaScript，在文档加载事件上运行，并调用该特定提交按钮上的 blur()。但是，这听起来有点尴尬 😉 - naivists

尽管听起来有些奇怪，但它并不起作用，我已经尝试过了，而且尝试了几种方法。 - ant

@naivists 这个问题让我在处理“网络无障碍”和键盘用户时感到困扰。焦点应该在输入框上，而不是按钮上。如何解决这个问题呢？ - esanz91