pasar - enviar formulario al presionar enter javascript
¿Cómo prevenir la pulsación de la tecla ENTER para enviar un formulario web? (27)
Agregue esta etiqueta a su formulario - onsubmit="return false;" Entonces solo puedes enviar tu formulario con alguna función de JavaScript.
¿Cómo evita que una pulsación de la tecla ENTRAR envíe un formulario en una aplicación basada en web?
Aquí hay un controlador jQuery que se puede usar para detener la introducción de envíos y también para detener la tecla de retroceso -> atrás. Los pares (keyCode: selectorString) en el objeto "keyStop" se usan para hacer coincidir los nodos que no deberían disparar su acción predeterminada.
Recuerde que la web debe ser un lugar accesible, y esto está rompiendo las expectativas de los usuarios del teclado. Dicho esto, en mi caso a la aplicación web en la que estoy trabajando no le gusta el botón Atrás de todos modos, así que deshabilitar su atajo de tecla está bien. La discusión "debería entrar -> enviar" es importante, pero no está relacionada con la pregunta real.
¡Aquí está el código, depende de usted para pensar en la accesibilidad y por qué realmente querría hacer esto!
$(function(){
var keyStop = {
8: ":not(input:text, textarea, input:file, input:password)", // stop backspace = back
13: "input:text, input:password", // stop enter = submit
end: null
};
$(document).bind("keydown", function(event){
var selector = keyStop[event.which];
if(selector !== undefined && $(event.target).is(selector)) {
event.preventDefault(); //stop event
}
return true;
});
});
En breve respuesta en Javascript puro es:
<script type="text/javascript">
window.addEventListener(''keydown'', function(e) {
if (e.keyIdentifier == ''U+000A'' || e.keyIdentifier == ''Enter'' || e.keyCode == 13) {
if (e.target.nodeName == ''INPUT'' && e.target.type == ''text'') {
e.preventDefault();
return false;
}
}
}, true);
</script>
Esto solo deshabilita la acción de pulsación de tecla "Enter" para el tipo de entrada = ''texto''. Los visitantes todavía pueden usar la tecla "Enter" en todo el sitio web.
Si también desea deshabilitar "Enter" para otras acciones, puede agregar console.log (e); para sus propósitos de prueba, y presione F12 en Chrome, vaya a la pestaña "consola" y presione "retroceso" en la página y mire dentro de ella para ver qué valores se devuelven, luego puede apuntar a todos esos parámetros para mejorar aún más el código arriba para satisfacer sus necesidades de "e.target.nodeName" , "e.target.type" y muchos más ...
En mi caso, este jQuery JavaScript solucionó el problema.
jQuery(function() {
jQuery("form.myform").submit(function(event) {
event.preventDefault();
return false;
});
}
Encontrarás esto más simple y útil: D
$(document).on(''submit'', ''form'', function(e){
/* on form submit find the trigger */
if( $(e.delegateTarget.activeElement).not(''input, textarea'').length == 0 ){
/* if the trigger is not between selectors list, return super false */
e.preventDefault();
return false;
}
});
Este enlace proporciona una solución que me ha funcionado en Chrome, FF e IE9, más el emulador para IE7 y 8 que viene con la herramienta de desarrollo de IE9 (F12).
Esto funcionó para mí.
onkeydown = "return! (event.keyCode == 13)"
<form id="form1" runat="server" onkeydown="return !(event.keyCode==13)">
</form>
He pasado algún tiempo haciendo este navegador para IE8,9,10, Opera 9+, Firefox 23, Safari (PC) y Safari (MAC)
Ejemplo de JSFiddle: http://jsfiddle.net/greatbigmassive/ZyeHe/
Código base: llame a esta función a través de "onkeypress" adjunto a su formulario y pase "window.event" a él.
function stopEnterSubmitting(e) {
if (e.keyCode == 13) {
var src = e.srcElement || e.target;
if (src.tagName.toLowerCase() != "textarea") {
if (e.preventDefault) {
e.preventDefault();
} else {
e.returnValue = false;
}
}
}
}
La prevención de "ENTRAR" para enviar el formulario puede incomodar a algunos de sus usuarios. Por lo tanto, sería mejor si sigues el siguiente procedimiento:
Escriba el evento ''onSubmit'' en su etiqueta de formulario:
<form name="formname" id="formId" onSubmit="return testSubmit()" ...>
....
....
....
</form>
escriba la función de Javascript de la siguiente manera:
function testSubmit(){
if(jQuery("#formId").valid())
{
return true;
}
return false;
}
(OR)
Cualquiera sea la razón, si desea evitar el envío del formulario al presionar la tecla Intro, puede escribir la siguiente función en javascript:
$(document).ready(function() {
$(window).keydown(function(event){
if(event.keyCode == 13) {
event.preventDefault();
return false;
}
});
});
Gracias.
La tecla ENTRAR simplemente activa el botón de envío predeterminado del formulario, que será el primero
<input type="submit" />
El navegador lo encuentra dentro del formulario.
Por lo tanto, no tiene un botón de envío, pero algo como
<input type="button" value="Submit" onclick="submitform()" />
EDITAR : En respuesta a la discusión en los comentarios:
Esto no funciona si solo tiene un campo de texto, pero puede ser que sea el comportamiento deseado en ese caso.
El otro problema es que esto se basa en Javascript para enviar el formulario. Esto puede ser un problema desde el punto de vista de la accesibilidad. Esto se puede resolver escribiendo el <input type=''button''/> con javascript y luego coloque un <input type=''submit'' /> dentro de una etiqueta <noscript> . El inconveniente de este enfoque es que para los navegadores deshabilitados para javascript, tendrá los formularios enviados en ENTER. Depende del OP decidir cuál es el comportamiento deseado en este caso.
No conozco ninguna forma de hacer esto sin invocar javascript en absoluto.
Me he encontrado con esto porque tengo varios botones de envío con diferentes valores de ''nombre'', de modo que cuando se envían hacen cosas diferentes en el mismo archivo php. El botón de enter / return rompe esto ya que esos valores no se envían. Así que estaba pensando, ¿el botón de enter / return activa el primer botón de envío en el formulario? De esa manera, podría tener un botón de "vainilla" que está oculto o tiene un valor de "nombre" que devuelve el archivo php en ejecución a la página con el formulario. O bien, un valor de "nombre" predeterminado (oculto) que la pulsación de tecla activa, y los botones de envío sobrescriben con sus propios valores de "nombre". Solo un pensamiento.
Otro enfoque es agregar el botón de entrada de envío al formulario solo cuando se supone que debe enviarse y reemplazarlo por un simple div durante el llenado del formulario
Para evitar que se envíe el formulario al presionar Intro en un área de textarea o campo de input , verifique el evento enviar para encontrar qué tipo de elemento envió el evento.
Ejemplo 1
HTML
<button type="submit" form="my-form">Submit</button>
<form id="my-form">
...
</form>
jQuery
$(document).on(''submit'', ''form'', function(e) {
if (e.delegateTarget.activeElement.type!=="submit") {
e.preventDefault();
}
});
Una solución mejor es si no tiene un botón de envío y dispara el evento con un botón normal. Es mejor porque en el primer ejemplo se activan 2 eventos de envío, pero en el segundo ejemplo solo se dispara 1 evento de envío.
Ejemplo 2
HTML
<button type="button" onclick="$(''#my-form'').submit();">Submit</button>
<form id="my-form">
...
</form>
jQuery
$(document).on(''submit'', ''form'', function(e) {
if (e.delegateTarget.activeElement.localName!=="button") {
e.preventDefault();
}
});
Por favor, consulte este artículo. ¿Cómo evitar presionar la tecla ENTER para enviar un formulario web?
$(“.pc_prevent_submit”).ready(function() {
$(window).keydown(function(event) {
if (event.keyCode == 13) {
event.preventDefault();
return false;
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class=”pc_prevent_submit” action=”” method=”post”>
<input type=”text” name=”username”>
<input type=”password” name=”userpassword”>
<input type=”submit” value=”submit”>
</form>
Puede capturar el keydown en un formulario en javascript y evitar el burbujeo uniforme, creo. INGRESAR en una página web, básicamente, simplemente envía el formulario en el que se encuentra el control seleccionado actualmente.
Qué tal si:
<asp:Button ID="button" UseSubmitBehavior="false"/>
Qué tal si:
<script>
function isok(e) {
var name = e.explicitOriginalTarget.name;
if (name == "button") {
return true
}
return false;
}
</script>
<form onsubmit="return isok(event);">
<input type="text" name="serial"/>
<input type="submit" name="button" value="Create Thing"/>
</form>
Y simplemente nombre su botón a la derecha y aún así se enviará, pero los campos de texto, es decir, el explícitoOriginalTarget, cuando presiona regresar en uno, no tendrán el nombre correcto.
Siempre lo he hecho con un controlador de pulsación de teclas como el anterior en el pasado, pero hoy he encontrado una solución más simple. La tecla Intro solo activa el primer botón de envío no deshabilitado en el formulario, por lo que en realidad todo lo que se necesita es interceptar el botón que intenta enviar:
<form>
<div style="display: none;">
<input type="submit" name="prevent-enter-submit" onclick="return false;">
</div>
<!-- rest of your form markup -->
</form>
Eso es. Las pulsaciones de tecla se manejarán como de costumbre por el navegador / campos / etc. Si se activa la lógica de ingreso y envío, entonces el navegador encontrará ese botón de envío oculto y lo activará. Y el controlador de javascript entonces evitará la sumisión.
Simplemente agrega este atributo a tu etiqueta FORM:
onsubmit="return gbCanSubmit;"
Luego, en su etiqueta SCRIPT, agregue esto:
var gbCanSubmit = false;
Luego, cuando crea un botón o por cualquier otra razón (como en una función) finalmente permite un envío, simplemente voltea el booleano global y realiza una llamada .submit (), similar a este ejemplo:
function submitClick(){
// error handler code goes here and return false if bad data
// okay, proceed...
gbCanSubmit = true;
$(''#myform'').submit(); // jQuery example
}
Simplemente devuelve falso desde el controlador onsubmit
<form onsubmit="return false;">
o si quieres un manejador en el medio
<script>
var submitHandler = function() {
// do stuff
return false;
}
</script>
<form onsubmit="return submitHandler()">
Tendrá que llamar a esta función que simplemente cancelará el comportamiento de envío predeterminado del formulario. Puede adjuntarlo a cualquier campo de entrada o evento.
function doNothing() {
var keyCode = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode;
if( keyCode == 13 ) {
if(!e) var e = window.event;
e.cancelBubble = true;
e.returnValue = false;
if (e.stopPropagation) {
e.stopPropagation();
e.preventDefault();
}
}
Todas las respuestas que encontré sobre este tema, aquí o en otras publicaciones tienen un inconveniente y es que evita que el cambio real se active en el elemento del formulario también. Por lo tanto, si ejecuta estas soluciones, el evento onchange no se activa también. Para superar este problema, modifiqué estos códigos y desarrollé el siguiente código para mí. Espero que esto sea útil para otros. Le di una clase a mi formulario "prevent_auto_submit" y agregué el siguiente JavaScript:
$(document).ready(function()
{
$(''form.prevent_auto_submit input,form.prevent_auto_submit select'').keypress(function(event)
{
if (event.keyCode == 13)
{
event.preventDefault();
$(this).trigger("change");
}
});
});
Tuve el mismo problema (formularios con toneladas de campos de texto y usuarios no calificados).
Lo resolví de esta manera:
function chkSubmit() {
if (window.confirm(''Do you want to store the data?'')) {
return true;
} else {
// some code to focus on a specific field
return false;
}
}
Usando esto en el código HTML:
<form
action="go.php"
method="post"
accept-charset="utf-8"
enctype="multipart/form-data"
onsubmit="return chkSubmit()"
>
De esta manera, la tecla ENTER funciona según lo planeado, pero se requiere una confirmación (generalmente un segundo toque ENTER ).
Dejo a los lectores la búsqueda de un script que envíe al usuario en el campo donde presionó ENTER si decide permanecer en el formulario.
[ revisión 2012, sin controlador en línea, preservar textarea entrar en el manejo]
function checkEnter(e){
e = e || event;
var txtArea = /textarea/i.test((e.target || e.srcElement).tagName);
return txtArea || (e.keyCode || e.which || e.charCode || 0) !== 13;
}
Ahora puede definir un controlador de pulsación de tecla en el formulario:
<form [...] onkeypress = "return checkEnter (evento)">
document.querySelector(''form'').onkeypress = checkEnter;
poner en javascript archivo externo
(function ($) {
$(window).keydown(function (event) {
if (event.keyCode == 13) {
return false;
}
});
})(jQuery);
o en algún lugar dentro de la etiqueta del cuerpo
<script>
$(document).ready(function() {
$(window).keydown(function(event) {
alert(1);
if(event.keyCode == 13) {
return false;
}
});
});
</script>
//Turn off submit on "Enter" key
$("form").bind("keypress", function (e) {
if (e.keyCode == 13) {
$("#btnSearch").attr(''value'');
//add more buttons here
return false;
}
});
stopSubmitOnEnter (e) {
var eve = e || window.event;
var keycode = eve.keyCode || eve.which || eve.charCode;
if (keycode == 13) {
eve.cancelBubble = true;
eve.returnValue = false;
if (eve.stopPropagation) {
eve.stopPropagation();
eve.preventDefault();
}
return false;
}
}
Luego en su formulario:
<form id="foo" onkeypress="stopSubmitOnEnter(e);">
Sin embargo, sería mejor si no utilizas JavaScript intrusivo.