validacion - HTML5: ¿Cómo hacer un envío de formulario, después de presionar ENTRAR en cualquiera de las entradas de texto?
validar formulario javascript html5 (4)
El título habla por sí solo ... Tengo un par de formularios, uno de ellos es solo un formulario de entrada de texto y el otro está compuesto por dos entradas de texto. No deseo ningún botón de envío en ninguno de ellos, quiero que cada formulario se envíe siempre que el usuario presione el botón ENTER en cualquier entrada de texto:
- El formulario compuesto por una sola entrada se envía cada vez que el usuario presiona el botón ENTER - ¡Perfecto!
- La segunda forma compuesta por dos entradas de texto no se comporta de esta manera, no se envía cuando el usuario presiona el botón ENTER en cualquiera de las dos entradas.
¿Hay alguna manera de hacer que un formulario con más de una entrada de texto se comporte de esta manera y evite tener un botón de envío en él?
Asegúrese de que sus entradas estén dentro del elemento "forma" y déle al elemento "forma" un atributo de "acción".
Deberá buscar la tecla Entrar. Esta publicación aquí muestra cómo hacer eso. Ingrese evento de presionar tecla en JavaScript
Estaba buscando una solución a este problema y quiero compartir mi solución, basada en muchas publicaciones aquí. (Probado en Chrome / Firefox / IE moderno)
Entonces, usando solo Javascript, el código siguiente envía el formulario si se presiona la tecla ENTER en cualquier campo o si se presiona el botón Submit . Después de eso borra / restablece el formulario, lo cual es algo bueno de hacer.
Espero eso ayude.
<!DOCTYPE html>
<html>
<body>
<p>Based on http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_ev_onsubmit</p>
<p>When you submit the form, a function is triggered which alerts some text.</p>
<div onKeyPress="return myFunction(event)">
<form id="form01" action="demo_form.asp" onsubmit="return false;" >
Enter name: <input type="text" name="fname">
<input type="button" value="Submit" onclick="myFunction(0)">
</form>
</div>
<script>
function myFunction(e) {
if((e && e.keyCode == 13) || e == 0) {
alert("The form was submitted");
document.forms.form01.submit();
document.forms.form01.fname.value = ""; // could be form01.reset as well
}
}
</script>
</body>
</html>
Intente agregar esto entre las etiquetas <form></form>
<input type="submit" style="display: none" />
Probado y funciona en Firefox y Chrome. Si tiene un tipo de entrada de envío en el formulario, enter debe enviarlo automáticamente, independientemente de si está visible o no.
De hecho, estoy usando esto en un formulario de inicio de sesión, aunque en el campo de nombre de usuario, tiene más sentido pasar al siguiente campo que enviar. En caso de que tenga un caso de uso similar, aquí está el código que utilicé (requiere jQuery)
$(''#username'').keypress(function(event) {
if (event.keyCode == 13 || event.which == 13) {
$(''#password'').focus();
event.preventDefault();
}
});
Sin embargo, tenga en cuenta que hay un pequeño error: si el usuario selecciona un nombre de usuario de autocompletado del navegador y presiona enter , aún se mueve al siguiente campo en lugar de seleccionarlo. No tuve tiempo para depurar esto, pero si alguien puede resolver cómo solucionarlo, sería genial.