Para no mezclar el codigo HTML con javascript en unmismo documento, el codigo javacript lo hare otro aparte, al cual llamaré funciones.js y junto a este colocaré la libreria jQuery.
Código en funciones.js :
var x;
x=$(document);
x.ready(AnularEnter);
function AnularEnter()
{
var x;
x=$("#form1");
x.keypress(function(e){if(e == 13){return false;}});
/*para los textboxes*/
$("input[type=text]").keypress(function(e){
if(e.which == 13){ return false; } });
/*para los radio*/
$("input[type=radio]").keypress(function(e){
if(e.which == 13){ return false; } });
/*para los checkboxes*/
$("input[type=checkbox]").keypress(function(e){
if(e.which == 13){ return false; } });
}
Explicación
La librería jQuery nos facilita la vida al momento de escribir codigo, en el ejemplo anterior, en la línea:x=$("#form1");
se obtiene al formulario mediante su Id, el cual en el ejemplo es form1.En javascript puro seria:
x= getElementById('form1');
Es decir, para seleccionar un elemento del DOM se usa la función $
Para seleccionar mediante el Id del elemento:
$("#elId");
Aunque en el ejemplo no se muestre, también se puede seleccionar mediante su clase:
$(".laClass");
Notar las diferencias: #(almohadilla) para Id y .(punto) para class.
Volviendo al ejemplo, tambien puedo seleccionar un elemento del DOM mediante su tipo:
$("input[type=text]");
Como se ve en el ejemplo anterior, se seleccionan todos los textbox, todos los radiobuttons y todos los checkboxes.
El numero 13 corresponde a la tecla Enter, asi que en:
$("input[type=text]").keypress(function(e){
if(e.which == 13){ return false; } });
le digo que si esta en un textbox y presiona(evento keypress) la tecla Enter, retorne un valor false, de esa forma la tecla Enter queda anulada y no se produce el submit.
De la misma forma funciona para los demás controles.
Notar que le paso como argumento e, e contiene las características del evento; es decir, tiene la información necesaria para ese evento.
También podemos prescindir de jquery y usar solo javascript,en este caso el evento sería onkeypress:
<html>
<head><title>Test-Submit</title>
<script type="text/javascript">
function CancelSubmit(e)
{
var keynum
if(window.event) // IE
{
keynum = e.keyCode
}
else if(e.which) // Netscape/Firefox/Opera
{
keynum = e.which
}
return (keynum != 13);
}
</script>
</head>
<body>
<h1>CANCELAR SUBMIT</h1>
<form method="post" action="Test-Submit.html">
<input type="text" onkeypress="return CancelSubmit(event)" />
</form>
</body>
</html>
No hay comentarios:
Publicar un comentario