如何从提交按钮中移除焦点

Posted 2023-03-06

【中文标题】如何从提交按钮中移除焦点

【英文标题】：How to remove focus from submit button

【发布时间】：2011-01-27 05:29:49

【问题描述】：

如何从提交按钮移除焦点？我不知道为什么它在第一个盘子里，而且它看起来真的很难看这里是一个截图：

它应该是这样的，当我在它旁边单击并将其悬停后，它又恢复了它的外观。

【参考方案1】：

这行得通：

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

【讨论】：

请注意，通过模糊任何焦点上的按钮，您将无法通过在按钮上按 enter 来提交表单，这是大多数人所期望的标准行为。如果您担心视觉效果，为什么不尝试像我提到的那样删除轮廓并保持焦点？

@bmoeskau 它不适用于删除元素，是的，我也想禁用输入以进行提交。

这不应该是一个公认的答案。您永远不应该从任何元素中移除焦点（例如，这会破坏键盘导航）。这可以使用 CSS 轻松删除，但您也应该提供一些其他形式的反馈（例如，当您删除轮廓时，您会更改背景）。 a11yproject.com/posts/2013-01-25-never-remove-css-outlines

【参考方案2】：

在你的按钮的 CSS 中试试这个，或者在封闭的 <a> （无论有什么焦点）中试试这个，如果你在标记中使用的是什么（reference）：

outline:0 none;

请记住，独特的焦点样式是一种有价值的可访问性/可用性功能，因此您应该提供一些在视觉上更令人愉悦的替代焦点提示，而不是完全删除它。

【讨论】：

我使用的是按钮而不是锚标签

请停止使用-moz-outline；从 Firefox 1.5 开始支持 outline。 +1 为 a11y 提醒。

另见：***.com/questions/71074/…

加一个用于封闭 。呵呵。

【参考方案3】：

在你的身体或形式中......

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

【讨论】：

我已经尝试过类似的方法，但 m8 也无法正常工作

【参考方案4】：

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

查看对类似帖子的回复：Stopping IE from highlighting the first submit-button in a form

【讨论】：

@naivists 相反，它在 IE 中运行良好，firefox 是它的焦点

很可能，Mozilla 正在尝试实现 html5，这就是您所看到的。当然，您可以创建一个在文档加载事件上运行的简单 javascript，并在该特定提交按钮上调用 blur()。然而，这听起来很尴尬;-)

尽管听起来很糟糕，但效果并不好，我已经尝试过，在几个方面......

@naivists 在处理“网络可访问性”和键盘用户时，这个焦点对我来说是一个问题。焦点应该在输入上，但在按钮上。如何解决这个问题？

【参考方案5】：

您可以将按钮编码为：

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

这消除了代码的“提交”功能，从而消除了焦点问题。