阻止 IE 突出显示表单中的第一个提交按钮

Posted 2023-03-05

【中文标题】阻止 IE 突出显示表单中的第一个提交按钮

【英文标题】：Stopping IE from highlighting the first submit-button in a form

【发布时间】：2010-10-01 08:23:23

【问题描述】：

在html 4.01 Specification 中似乎未定义在表单中输入的预期行为，而 HTML 5 规范 says 它应该是表单中的第一个提交按钮。

当表单具有焦点时，Internet Explorer (IE) 通过添加专有边框或其他内容突出显示表单中的第一个按钮。其他浏览器不添加这样的视觉线索。

我想使用另一个按钮作为默认按钮并设置此按钮的样式，以便所有浏览器都会提供一个视觉线索，表明它是默认按钮。 （我们使用的是每页使用一个表单的 ASP.NET，因此很难设计页面以使默认按钮始终位于第一位。）

虽然我可以在大多数浏览器中使用 javascript 和 css 轻松完成此操作，但我无法让 IE 停止突出显示第一个按钮。

有没有办法告诉 IE 不突出显示第一个提交按钮或突出显示不同的按钮？还是我错过了其他一些解决方案？

【参考方案1】：

在您的 asp.net 按钮控件上，设置 useSubmitBehavior="false"。这会将 html 呈现为按钮而不是提交。

【参考方案2】：

ASP.Net 2.0 也引入了 DefaultButton 的概念。

这至少适用于 Form 和 Panel 元素：

<form id="form1" runat="server" defaultbutton="Button2">
<div>
    <asp:TextBox id="TextBox1" runat="server"></asp:TextBox>
    <br />
    <asp:Button id="Button1" runat="server" text="1st Button" onclick="Button1_Click" />
    <br />
    <br />
    <asp:panel id="something" defaultbutton="button3" runat="server">
        <asp:TextBox id="TextBox2" runat="server"></asp:TextBox>
        <br />
        <asp:Button id="Button2" runat="server" text="2nd Button" onclick="Button2_Click" />
        <br />
        <asp:Button id="Button3" runat="server" text="3rd Button" onclick="Button3_Click" />

    </asp:panel>
    <br />
    <br />

</div>
</form>

因此，当您加载页面或在 TextBox1 中输入文本时，按 Enter 将提交 Button2。当您在 TextBox2 中输入文本时，按 Enter 将提交 Button3 - 就像您在面板中一样。

这由 ASP.Net 创建的 onkeypress 方法提供支持。

当页面加载时，IE 和 Firefox 都会高亮显示 Button2（如你所愿）。

如果您知道哪个按钮将被声明为默认按钮，则可以使用通常用于为所有浏览器设置样式的 CSS。

相当烦人的是，当您聚焦任一文本框时，IE 会（错误地）突出显示 Button1。

这是因为 IE 的默认行为被 ASP.Net 发出的一些 javascript 覆盖：

<script type="text/javascript">
//<![CDATA[
WebForm_AutoFocus('Button2');//]]>
</script>

但是，一旦另一个元素获得焦点，IE 就会忽略这一点，并返回突出显示错误的按钮（除非用户在此示例中明确单击它，否则不会使用该按钮）。

除了用图像按钮替换它们之外，我不确定我还能建议什么。

【讨论】：

很好地描述了当前的事务状态。不幸的是，正如您自己指出的那样，问题仍未解决。

【参考方案3】：

解决此问题的一种方法是在表单顶部创建一个虚拟按钮并将其移出视线。然后在 javascript 中处理 enter keycode 并使用 css 设置新的默认按钮的样式。

虽然感觉很脏。有更好的想法吗？

【参考方案4】：

使用这些 CSS 样式中的任何一种

a:active, a:focus,input, input:active, input:focus     outline: 0;     outline-style:none;     outline-width:0;   
a:active, a:focus,button::-moz-focus-inner, input[type="reset"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner, input[type="submit"]::-moz-focus-inner, input[type="file"] > input[type="button"]::-moz-focus-inner 
     border: none;  

或

:focus outline:none; ::-moz-focus-inner border:0;

CSS 样式部分完成后，您可能还需要设置 IE 模拟器。更新您的 Web 应用程序 web.config 文件并包含以下键。

  <system.webServer>
    <httpProtocol>
      <customHeaders>
        <clear />
        <add name="X-UA-Compatible" value="IE=7; IE=9; IE=8; IE=5;" />
      </customHeaders>
    </httpProtocol>

  </system.webServer>

【参考方案5】：

如果您使用.Net 2 this 可能会对您有所帮助

...使用 DefaultFocus 属性 访问表单上的控件以 显示为带输入的控件 HtmlForm 控件时的焦点 加载。 可选择的控件 以视觉提示显示 表明他们有焦点。 例如，一个 TextBox 控件与 焦点与插入一起显示 位于其中的点。 ...

【讨论】：

不幸的是，它对我没有帮助。谢谢你的尝试。 :)

【参考方案6】：

为这个按钮定义一个特定的 CSS 样式（或类）怎么样？

<input type="button" value="basic button" .../>
<input type="button" style="border: solid 2px red;" value="default button" .../>

【讨论】：

是的，但这并不能回答问题。我试图改进这个问题，以便更清楚我在寻找什么。