Evite que los usuarios envíen un formulario presionando Enter
Tengo una encuesta en un sitio web y parece haber algunos problemas con los usuarios que presionan Intro (no sé por qué) y envían accidentalmente la encuesta (formulario) sin hacer clic en el botón Enviar. ¿Hay alguna manera de prevenir esto?
Estoy usando HTML, PHP 5.2.9 y jQuery en la encuesta.
Puedes utilizar un método como
$(document).ready(function() {
$(window).keydown(function(event){
if(event.keyCode == 13) {
event.preventDefault();
return false;
}
});
});
Al leer los comentarios de la publicación original, para hacerlo más usable y permitir que las personas presionen Entersi han completado todos los campos:
function validationFunction() {
$('input').each(function() {
...
}
if(good) {
return true;
}
return false;
}
$(document).ready(function() {
$(window).keydown(function(event){
if( (event.keyCode == 13) && (validationFunction() == false) ) {
event.preventDefault();
return false;
}
});
});
May 21 '2009 21:05
No permitir la tecla Intro en ningún lugar
Si no tiene uno <textarea>en su formulario, simplemente agregue lo siguiente a su <form>:
<form ... onkeydown="return event.key != 'Enter';">
O con jQuery:
$(document).on("keydown", "form", function(event) {
return event.key != "Enter";
});
Esto hará que cada pulsación de tecla dentro del formulario se verifique en el archivo key. Si no es así Enter, volverá truey todo continuará como de costumbre. Si es así Enter, volverá falsey todo se detendrá inmediatamente, por lo que no se enviará el formulario.
keydownSe prefiere el evento keyupporque keyupes demasiado tarde para bloquear el envío del formulario. Históricamente también existía el keypress, pero está en desuso, al igual que el KeyboardEvent.keyCode. Deberías usar KeyboardEvent.keyen su lugar que devuelva el nombre de la tecla que se presiona. Cuando Enterestá marcado, esto marcaría 13 (entrada normal) así como 108 (entrada del teclado numérico).
Tenga en cuenta que, $(window)como se sugiere en algunas otras respuestas, en lugar de $(document)no funciona para keydown/ keyupen IE <= 8, por lo que no es una buena opción si desea cubrir también a esos usuarios deficientes.
Permitir la tecla Intro solo en áreas de texto
Si tiene un archivo <textarea>en su formulario (que, por supuesto, debería aceptar la tecla Intro), agregue el controlador de pulsación de tecla a cada elemento de entrada individual que no sea un archivo <textarea>.
<input ... onkeydown="return event.key != 'Enter';">
<select ... onkeydown="return event.key != 'Enter';">
...
Para reducir el texto repetitivo, es mejor hacerlo con jQuery:
$(document).on("keydown", ":input:not(textarea)", function(event) {
return event.key != "Enter";
});
Si tiene otras funciones de controlador de eventos adjuntas a esos elementos de entrada, que también le gustaría invocar con la tecla Intro por algún motivo, entonces solo evite el comportamiento predeterminado del evento en lugar de devolver falso, para que pueda propagarse correctamente a otros controladores.
$(document).on("keydown", ":input:not(textarea)", function(event) {
if (event.key == "Enter") {
event.preventDefault();
}
});
Permitir la tecla Intro en áreas de texto y botones de envío únicamente
Si también desea permitir la tecla Intro en los botones de envío <input|button type="submit">, siempre puede refinar el selector como se muestra a continuación.
$(document).on("keydown", ":input:not(textarea):not(:submit)", function(event) {
// ...
});
Tenga en cuenta que, input[type=text]como se sugiere en algunas otras respuestas, no cubre esas entradas HTML5 que no son de texto, por lo que no es un buen selector.
