Cancelar enter en una caja de texto con javascript

Cómo cancelar enter en una caja de texto con javascript

Dentro de un documento html existen eventos default asociados con cada objeto dentro del documento.

Resulta que necesito cancelar el enter dentro de un textbox, es decir cuando el usuario da enter estando el enfoque en la caja de texto.

Esto es un requerimiento común porque es muy natural que el usuario haga enter una vez que ha terminado de llenar algún formulario. El problema es cuando tienes varios eventos asociados en tu caja de texto y entran en conflicto varios eventos.

Primero que nada la razón de este comportamiento es que la caja de texto se encuentra dentro de un elemento <form> y el evento default de éste siempre es hacer submit. Es decir que cualquier caja de texto dentro del form hace submit al dar enter.

Mi html basico luce así:

<form>
<input type="text" />
</form>

Ahora lo que hay que hacer es bloquear el enter dentro del control y regresar un false para evitar que el elemento form haga submit.

Esto lo logramos usando el evento onkeypress del textbox. KeyCode = 13 es la tecla Enter. Eso devolverá false cuando el keyCode sea enter y eso cancela el submit de la forma html.

<input type="text" onkeypress="return event.keyCode != 13;" />

Si tienen tiempo y quieren ver el código de cada tecla,  agreguen un alert en el mismo evento.

Este ejemplo es con javascript puro. Si quieren usar y tienen jQuery incluido en el documento, pueden usarlo para bloquear todas las cajas de texto o a través de algún selector jQuery.

Algo así:

$(document).on("keypress", "form", function(event) { 
    return event.keyCode != 13;
});

Como saben, las posibilidades son infinitas.

Espero les sirva.