Cómo desactivar enter en formulario HTML

Anuncio:

Hay determinados formularios en los que no nos interesa que la tecla enter o intro funcione, pues se puede dar el caso de que un usuario pulse por error esta tecla al estar introducciendo la información y se haga un submit indeseado del form.

Vamos a ver cómo desactivar la tecla enter / intro en los inputs de un formulario en HTML

La función en JavaScript que usaremos para esto es la siguiente:

< script type=" text / javascript " >
     function anular(e) {
          tecla = (document.all) ? e.keyCode : e.which;
          return (tecla != 13);
     }
< / script >

Esta función devuelve la tecla pulsada solo si es distinta de keyCode 13, perteneciente a la tecla enter, en caso contrario no devuelve nada. La función podemos colocarla dentro del head de nuestro documento HTML o bien al final de modo que pueda cargar la información de nuestra web y este tipo de funcionalidad cargue al final para no molestar al usuario.

La función por sí sola no es capaz de anular el enter en el input del formulario, hay que invocarla, por lo que la usaremos de la siguiente forma

< form action="procesar.php" onkeypress="return anular(event)">
     < input type="text" / >
     < input type="submit" / >
< / form>

Con el parámetro onkeypress de la etiqueta form llamamos a la función anula_enter de modo que si la tecla es enter/intro no devolverá nada y por tanto no hará nada.

Esta es una de algunas soluciones posibles. Por ejemplo también podemos hacerlo con jQuery, pero en un proyecto donde no utilicemos jQuery, creo que no es aconsejable cargar todo jQuery, solo para esto, pudiendo hacerlo con JavaScript nativo y de forma sencilla.

Esperamos que os haya sido de utilidad.

• HTML5
• JavaScript
• Programación