El evento KeyDown o KeyPress en Internet Explorer lanza el evento OnClick del botón más próximo, según el TabIndex, al pulsar Enter

Autor: alberto

Martes, 8 de Septiembre de 2009

Menudo tostón de título. A más de uno le dará sueño leerlo, parece el título de esos libros antiguos que te resumían todo lo que iba a ocurrir y te fastidiaban la sorpresa. Pero en esta ocasión ocurre todo lo contrario, este tema va de programación web, y, desgraciadamente, pocas veces las cosas son lo que parecen. Esto está lleno de expedientes X.

Uno de los mayores quebraderos de cabeza en la programación web son las diferencias entre los navegadores más utilizados Internet Explorer y FireFox. Para el tema que nos ocupa FireFox lo hace de lujo, como casi siempre.

El objetivo es que al introducir o cambiar texto en un asp:TextBox, y posteriormente pulsar a la tecla Enter, esta acción origine el mismo comportamiento que si apretas (haces click) en un botón buscar.

Para esto se suele capturar a través de JavaScript la tecla pulsada con un sencillo código:

<script type="text/javascript" language="javascript">
function HazAlgo(){
var key = window.event.keyCode;
if(key==13)
{
   //tu ilógica aquí
}
}
</script>

Suponiendo que en el documento aspx hay un TextBox con el ID “campoDeTexto”, durante el Page_Load se registra así:

campoDeTexto.Attributes.Add("onkeypress", "HazAlgo()");

Supón que tu diseñador es tan puñetero y minimalista como el nuestro y no quería un botón cutre, ni una imagen para el botón “Buscar”, así que terminas usando un asp:LinkButton para que goce lo suyo con el CSS y te deje en paz un rato. Aquí vienen las malas noticias. Al pulsar Enter, FireFox ejecuta la función javascript “HazAlgo” pero Internet Explorer pasa de todo, este navegador echa un vistazo al documento y busca los input type=”button” o “image” y les simula un click.

Por lo tanto, todo lo que tenías previsto se va al garete si durante el documento has usado asp:Button o asp:ImageButton, para cualquier cosa que no fuera esa búsqueda.

No pierdas más tiempo con eso, mete el TextBox en un asp:panel y dile que el DefaultButton es “Buscar”.

Y todo solucionado.

Aquí va una muestra de cómo debería ser:

<asp:Panel ID="miSalvador" runat="server" DefaultButton="Buscar">
<asp:TextBox ID="campoDeTexto" runat="server" Text="Escribe algo"></asp:TextBox>
<asp:LinkButton ID="Buscar" OnClick="HazAlgoEnServidor" Text="Buscar"
runat="server"></asp:LinkButton>
</asp:Panel>
<asp:Button ID="Punyetero" runat="server" Text="Puñetero" OnClick="NoMeHagasEsto"></asp:Button>

Prueba esto sin el panel “miSalvador” y luego con él.

Permalink | Comentarios (7) | Compartir en otras redes

Posts Relacionados

7 Comentarios en “El evento KeyDown o KeyPress en Internet Explorer lanza el evento OnClick del botón más próximo, según el TabIndex, al pulsar Enter”

+ Chano Zamora comentó:

Buen articulo, basico, pero concreto!
Me funcionó!

+ freddy mina comentó:

Pero tu solucion solo funciona en internet explorer

+ admin comentó:

Prueba poniendo esto en el page_load y quitando el javascript:
protected void Page_Load(object sender, EventArgs e)
{
campoDeTexto.Attributes.Add(“onKeyPress”, “javascript:if (event.keyCode == 13) __doPostBack(‘” + Buscar.UniqueID + “‘,”)”);
}

+ Christian Louboutin comentó:

i am happy to find it thanks for sharing it here. Nice work.

+ CL SHOES comentó:

Hello everyone thanks for

good information.

+ Best Registry Cleaner comentó:

great share, great article, very usefull for me…thank you

+ mbt shoes comentó:

Thanks very good for report, I follow your blog

Deja aquí tu comentario:

Nombre (obligatorio)

Mail (obligatorio)

Web (opcional)

Tu opinión