Detener Introducir/Devolver clave que envía un formulario

Question

Tengo una tabla dentro de un formulario. La tabla contiene algunos campos de formulario, pero también hay campos de formulario fuera de la tabla (pero también dentro del formulario).

Sé que Enter y Return se usan tradicionalmente para enviar un formulario a través del teclado, pero quiero detener este comportamiento para los campos dentro de la tabla. Por ejemplo, si enfoco un campo dentro de la tabla y presiono Enter/Return, no pasa nada. Si enfoco un campo fuera de la tabla (pero aún dentro del formulario), entonces lo enviaré normalmente.

Tengo un complemento jQuery que se dirige a esta tabla. Simplificado, esto es lo que he tratado hasta aquí:

base.on('keydown', function(e) { 
    if (e.keyCode == 13) { 
     e.stopPropagation(); 
     return false; 
    } 
}); 

Dónde base es la tabla de objetos jQuery. Esto está dentro del método init de mi complemento. Sin embargo, presionando Enter aún envía el formulario.

¿Dónde me estoy equivocando?

EDIT: Algunos HTML simplificada:

<form method="" action=""> 
    <input type="text" /><!--this should still submit on Enter--> 
    <table> 
    <tbody> 
     <tr> 
     <td> 
      <input type="text" /><!--this should NOT submit on Enter--> 
     </td> 
     </tr> 
    </tbody> 
    </table> 
</form> 

Answer 1

base.keypress(function(e) { 
    var code = e.keyCode || e.which; 
    if(code == 13) 
     return false; 
}); 

o sólo para entradas:

$(':input', base).keypress(function(e) { 
    var code = e.keyCode || e.which; 
    if(code == 13) 
     return false; 
}); 

Answer 2

e.preventDefault() en lugar de e.stopPropagation(). stopPropagation solo detiene su burbujeo en nodos DOM más altos, no evita la acción predeterminada.

Answer 3

Voy a suponer que un elemento de formulario se disparará el evento presentará, no lo hace burbujear a través de la mesa y en la forma, probar esto instread:

$('input, select, textarea', base).on('keydown', function(e) { 
    if (e.keyCode == 13) { 
     return false; 
    } 
}); 

Nota estamos también proporciona contexto al selector, por lo que este keyDown solo se producirá en los elementos (modifíquelos según sea necesario) dentro de su tabla.

Como gordan dicho en otro comentario, return false hace las dos .preventDefault() y .stopPropagation()

Answer 4

he encontrado este Q/A tratar de resolver una situación similar donde tengo formularios múltiples y enter no haría lo que quería. En mi caso específico, agregaría dinámicamente un nuevo <div id="D1"> D1, D2, D3, etc., y cada div nuevo tiene un formulario que volvería a cargar ese div del mismo código php que lo creó, solo que también con un POST.

no relacionado primer problema era que no podía crear dinámicamente una nueva función con cada div, por lo que pasó el D1, etc, elementos descriptivos como un argumento a la función Javascript:

<script type="text/javascript"> 
function formSubmit (divid) { 
    // post data 
    event.preventDefault(); 
    $.post("make-my-form-div.php", 
      $("#form"+divid).serialize(), 
      function(data){ 
       $("#"+divid).html(data); 
      }); 
    return false; 
} 
</script> 

Verá el requisito event.preventDefault(); y return false; que funciona para las respuestas en este hilo. No funcionó para mí. Si hago clic en Enviar en cualquier forma, ese div se volvería a cargar con los datos correctos. Pulsar enter provocaría una acción predeterminada y volvería a cargar toda la página, dejándome solo con 1 div.

This Answer worked: Necesitaba una ID única y NOMBRE para los diferentes formularios. Inicialmente, eran <INPUT TYPE="button" VALUE="Submit" onClick="formSubmit('<?php echo $divid ?>');"> pero una vez que agregué una ID y NOMBRES únicos, como "formD1", etc., todo comenzó a funcionar correctamente.

Answer 5

Esto funciona para mí.

$("input[type='text']").on('keypress', function(e) { return e.keyCode != 13; }); 

Answer 6

Simplemente ponga debajo del código en su archivo de plantilla o en el encabezado de la página.

<script type="text/javascript"> 

function stopRKey(evt) { 
    var evt = (evt) ? evt : ((event) ? event : null); 
    var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null); 
    if ((evt.keyCode == 13) && (node.type=="text")) {return false;} 
} 

document.onkeypress = stopRKey; 

</script>