Stopping IE from highlighting the first submit-button in a form

Question

The expected behaviour on enter in a form seems to be undefined in the HTML 4.01 Specification while the HTML 5 specification says it should be the first submit button in th

Answer 1

If you are using .Net 2 this may help you

...Use the DefaultFocus property to access the control on the form to display as the control with input focus when the HtmlForm control is loaded. Controls that can be selected are displayed with a visual cue indicating that they have the focus. For example, a TextBox control with focus is displayed with the insertion point positioned inside of it. ...

Answer 2

What about defining a particular CSS style (or class) for this button ?

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

Answer 3

On your asp.net button control, set useSubmitBehavior="false". That renders the html as a button rather than a submit.

Answer 4

Use either of these CSS Styles

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

Once the CSS Style part is done, then you might also need to set the IE-Emulator. Update your web applications web.config file and include below key.

  <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

One way to get around this is to create a dummy button at the top of the form and move it out of sight. Then handle the enter keycode in javascript and style the new default button with css.

Feels dirty though. Any better ideas?

Answer 6

ASP.Net 2.0 also introduced the concept of DefaultButton.

This is available on atleast Form and Panel elements:

<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>

So, when you load the page, or are entering text in TextBox1, pressing Enter will submit Button2. When you are entering text in TextBox2 pressing Enter will submit Button3 - as you are inside the Panel.

This is powered by an onkeypress method created by ASP.Net.

When the page loads, IE and Firefox both highlight Button2 (as you want).

If you know which button will be declared as the defaultbutton, you can use what ever CSS you would normally use to style this for all browsers.

Rather annoyingly, when you focus either text box, IE will then (incorrectly) highlight Button1.

This is because IE's default behaviour is overridden by some javascript emitted by ASP.Net:

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

But, IE will then ignore that once another element has focus, and go back to highlighting the wrong button (which doesn't get used unless the user explicitly clicks it in this example).

Other than replacing them with image buttons, I'm not sure what else I can suggest.