asp.net - mensaje - confirmar submit javascript

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 la Especificación HTML 4.01, mientras que la especificación HTML 5 dice que debe ser el primer botón de envío en el 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 el botón predeterminado siempre sea lo primero).

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

¿Qué hay de definir 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 2

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

Esto está disponible en los elementos de formulario y panel atleast:

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

Entonces, cuando cargue la página, o esté ingresando texto en TextBox1, presionando Enter enviará 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 se carga la página, IE y Firefox resaltan Button2 (como quieras).

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 entonces (incorrectamente) resaltará Button1.

Esto se debe a que el comportamiento predeterminado de IE está anulado por algunos javascript emitidos por ASP.Net:

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

Pero, IE ignorará eso una vez que otro elemento tenga foco, y volverá a resaltar el botón equivocado (que no se usa a menos que el usuario haga clic explícitamente en este ejemplo).

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

Answer 3

Si usa .Net 2, esto puede ayudarlo

... Utilice la propiedad DefaultFocus para acceder al control en el formulario para mostrar como el control con el foco de entrada cuando se carga el control HtmlForm. Los controles que se pueden seleccionar se muestran con una indicación visual que indica que tienen el foco . Por ejemplo, se muestra un control TextBox con foco con el punto de inserción ubicado dentro de él. ...

Answer 4

Una forma de evitar esto es crear un botón ficticio 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.

Se siente sucio sin embargo. Alguna mejor idea?

Answer 5

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

Una vez que se haya completado la parte del Estilo CSS, es posible que también deba configurar el IE-Emulator. 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>

Answer 6

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