Question

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

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

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

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

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

Answer 1

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

Answer 2

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

这可以在至少表格和面板元素上找到：

<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 - 就像您在Panel中一样。

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

当页面加载时，IE和Firefox都会突出显示Button2（如您所愿）。

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

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

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

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

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

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

Answer 3

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

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

Answer 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; }

OR

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

完成CSS样式部分后，您可能还需要设置IE-Emulator。更新您的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>

Answer 5

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

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

Answer 6

如何为此按钮定义特定的CSS样式（或类）？

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

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

6 个答案: