Detener IE al resaltar el primer botón de enviar en un formulario

Question

El comportamiento esperado al ingresar en un formulario parece no estar definido en HTML 4.01 Specification mientras que la especificación HTML 5 says debe ser el primer botón de envío del formulario.

Internet Explorer (IE) resalta el primer botón en el formulario cuando el formulario tiene foco al agregar un borde propietario o algo así. Otros navegadores no agregan una pista visual.

Me gustaría usar otro botón como predeterminado y darle estilo a este botón para que todos los navegadores proporcionen una pista visual de que es el botón predeterminado. (Estamos usando ASP.NET que usa un formulario por página, por lo que es difícil diseñar las páginas para que siempre aparezca el botón predeterminado).

Aunque puedo lograrlo fácilmente con javascript y css en la mayoría de los navegadores , Tengo problemas para hacer que IE deje de resaltar el primer botón.

¿Hay alguna manera de decirle a IE que NO resalte el primer botón de enviar o que resalte un botón diferente? ¿O hay alguna otra solución que me he perdido?

Answer 1

En su control de botón asp.net, establezca useSubmitBehavior="false". Eso representa el html como un botón en lugar de un envío.

Answer 2

¿Qué hay de la definición de un estilo CSS (o clase) particular para este botón?

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

Answer 3

Si está utilizando .Net 2 this puede ayudarle a

... Utilice la propiedad DefaultFocus a el acceso al control en el formulario para pantalla como el control de entrada con enfoque cuando el control HtmlForm está cargado. Los controles que se pueden seleccionar se muestran con una referencia visual indicando que tienen el foco. Por ejemplo, se muestra un control TextBox con enfoque con el punto de inserción ubicado en su interior. ...

Answer 4

Una forma de evitar esto es crear un botón falso en la parte superior del formulario y moverlo fuera de la vista. A continuación, maneje el código clave enter en javascript y escriba el nuevo botón predeterminado con css.

Aunque se siente sucio. Alguna mejor idea?

Answer 5

ASP.Net 2.0 también introdujo el concepto de DefaultButton.

Esto está disponible en el atleast Los elementos de formulario y paneles:

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

Por lo tanto, cuando se carga la página, o introduce texto en TextBox1, al pulsar Enter se presentará en Button2. Cuando ingresa texto en TextBox2 presionando Enter enviará Button3, como lo está dentro del Panel.

Esto funciona con un método onkeypress creado por ASP.Net.

Cuando la página se carga, IE y Firefox resaltan Button2 (como desee).

Si sabe qué botón se declarará como el botón predeterminado, puede usar cualquier CSS que use normalmente para darle estilo a todos los navegadores.

Bastante molesto, cuando enfocas cualquier cuadro de texto, IE (incorrectamente) resaltará Button1.

Esto se debe a comportamiento por defecto de IE queda anulado por algunos javascript emitida por ASP.Net:

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

Pero, IE y luego ignorar que una vez que un elemento tiene el foco, y volver a poner de relieve el botón equivocado (que no se usa a menos que el usuario haga clic explícitamente en este ejemplo).

Aparte de reemplazarlos con botones de imagen, no estoy seguro de qué más puedo sugerir.

Answer 6

Use cualquiera de los estilos 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; } 

O

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

vez que la parte de estilos CSS se hace, entonces es posible que también tenga que configurar el IE-emulador. Actualice su archivo web.config de aplicaciones web e incluya la clave a continuación.

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

    </system.webServer>