16 noviembre 2006

Deshabilitar la tecla ENTER en los formularios

El día de hoy debía continuar con la implementación de una página en PHP, y me topé con el problema de siempre:

¿Cómo validar los datos de un formulario antes de enviarlos?

Pues bien. La respuesta ya era conocida -JavaScript. Debí cambiar el botón de tipo submit por uno de tipo button y asignarle la función de validación en el evento onClick.

Todo bien. Excepto por un pequeño detalle. Al navegador le importa poco si existe o no un botón submit, cuando se presiona la tecla enter en una casilla de tipo text el formulario envía los datos de manera automática.

La solución: más simple de lo que yo esperaba. Al principio pensé en una función encargada de filtrar las pulsasiones y lamarla en en el evento onKeypress de cada casilla de texto. Sin embargo navegando por la red me encontré con algo más simple.

<input type="text" name="nombre" onkeypress="return event.keyCode!=13">

...el único problema será cuando el navegador no tenga habilitado el JavaScript.

14 comentarios:

  1. Hola Mario

    Tengo una duda... si tuvieras 50 campos text, habria que poner el mismo codigo en todos???

    ResponderBorrar
  2. Es posible desabilitar la tecla ENTER para "todos" los elementos del formulario utilizando el mismo código en el evento onKeyPress del formulario.

    <form onkeypress="return event.keyCode!=13">

    Para deshabilitar dicha tecla en todo el documento habrá que incluir el siguiente código en el encabezado:

    <script type="text/javascript"<
    document.onkeypress = KeyPressed;
    function KeyPressed(e)
    { return ((window.event) ? event.keyCode : e.keyCode) != 13; }
    </script>

    ResponderBorrar
  3. Hola Mario

    Tengo en el formulario los enter desactivados, ¿como tendria que hacer para activarlos en textos multilinea?

    ResponderBorrar
  4. ya provaron esto

    < form id="id" name="name" onsubmit="return false;" >

    a mi me funciona y no tengo que poner nada en cada campo

    ResponderBorrar
  5. Funciono perfecto.
    Muchas gracias.

    ResponderBorrar
  6. Gracias compadre. Era lo que buscaba.

    ResponderBorrar
  7. Magnífico, me ha salvado :)

    ResponderBorrar
  8. Gracias totales!!!, me sirvio mucho

    ResponderBorrar
  9. ¡Excelente Mario, funciona al cien!

    ResponderBorrar
  10. muchas gracias se pasaron

    ResponderBorrar
  11. Muchas gracias Mario, ya tenia un rato buscando la solución. Incluso exploré varias funciones y nada. Por cierto: Confirmo lo que dice Mario de poner en todos los input type text ese pequeño código. Gracias de nuevo Mario. Un saludo.

    ResponderBorrar
  12. Excelente te has ganado un nuevo seguidor!!

    ResponderBorrar