¿Por qué formularios con solo campo de entrada se someten al presionar la tecla enter en la entrada

Por qué es que un <form> con una sola <input> campo provocará que se recargue el formulario cuando el usuario introduce un valor y presiona el Introduzca, y no lo hace si hay 2 o más campos en el <form>?¿Por qué formularios con solo campo de entrada se someten al presionar la tecla enter en la entrada

Escribí simple page para probar esta rareza.

Si ingresa un valor en el segundo formulario y presiona Intro, verá que vuelve a cargar la página pasando el valor ingresado como si llamara al GET. ¿por qué? y como lo evito?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>testFormEnter</title> 
</head> 
<body> 
<form> 
    <input type="text" name="partid2" id="partid2" /> 
    <input type="text" name="partdesc" id="partdesc" /> 
</form> 
    <p>2 field form works fine</p> 
<form> 
<input type="text" name="partid" id="partid" /> 
</form> 
<p>One field form reloads page when you press the Enter key why</p> 
</body> 
</html>

Fuente

2009-09-02 sdfor

Esto es un poco conocido "Quirk" que ha estado fuera por un tiempo. Sé que algunas personas lo han resuelto de varias maneras.

El bypass más fácil en mi opinión es simplemente tener una segunda entrada que no se muestra al usuario. Dado que no es tan fácil de usar en el backend, funciona para resolver el problema.

Debo señalar que el lugar más común que escucho de este problema es con IE específicamente y no con FireFox u otros. Aunque parece afectarlos también.

Fuente

2009-09-02 20:50:15

Gracias, ojalá estuviera documentado en alguna parte. Perdí horas depurando una página grande pensando que era algo más, atado a mi ajax. Solo descubrí el "capricho" después de extraer el código y comencé a eliminar línea tras línea. ¡Qué pérdida de tiempo! – sdfor

Y tienes razón, es una solución fácil con un campo oculto. Por cierto, si afecta a firefox 3.5.2. Tal vez se considera una característica. – sdfor

Ah sí, siento tu dolor ... así es como me enteré, digamos 5-6 años atrás ... –

No está recargando la página como tal, está enviando el formulario.

Sin embargo, en este ejemplo porque no tiene ningún atributo de acción en el formulario, se envía a sí mismo lo que da la impresión de volver a cargar la página.

Además, no puedo reproducir el comportamiento que describes. Si estoy en cualquier entrada de texto en un formulario y presiono Enter, envía el formulario, sin importar en qué parte del formulario se encuentra la entrada o cuántas entradas hay.

Es posible que desee probar esto más en diferentes navegadores.

Fuente

2009-09-02 20:54:28

Tiene razón, yo no estaba usando las palabras correctas. Está enviando el formulario y dado que no especifico una acción, se predetermina a sí mismo. Copié el HTML exacto y lo ejecuté en IE8 y Firefox 3.5.2. Una tecla Intro en los primeros 2 campos, que están en el primer formulario, no envía el formulario, mientras que una tecla Intro en el tercer campo sí lo hace. – sdfor

Esto es known bug in IE6/7/8. No parece que obtendrá una solución para ello.

La mejor solución que puede hacer para esto, es agregar otro campo oculto (si su conciencia de ingeniería lo permite). IE ya no enviará automáticamente un formulario cuando descubra que hay dos campos de tipo de entrada en el formulario.

actualización

En caso de que se preguntan por qué este es el caso, esta joya viene directamente de la HTML 2.0 specification (Section 8.2):

Cuando hay un solo campo de entrada de texto de una sola línea en una formulario, el agente de usuario debe aceptar Entrar en ese campo como una solicitud para enviar el formulario.

Fuente

2009-09-02 21:46:18

Esto también ocurre en Firefox 3.5 – cssmaniac

+1 para el enlace al culpable en la especificación –

y sucede en Chrome también ... –

Presionar Entrar funciona de manera diferente dependiendo de (a) la cantidad de campos que hay y (b) la cantidad de botones de envío que hay. Puede que no haga nada, puede enviar el formulario sin el botón de envío "exitoso", o puede simular que se hizo clic en el primer botón de envío (incluso generando un clic para él) y enviarlo con el valor de ese botón.

Por ejemplo, si agrega un input type="submit" a su formulario de dos campos, notará que también se envía.

Esta es una peculiaridad del navegador antiguo que se remonta al menos hasta Netscape temprano (tal vez más), que es poco probable que se modifique ahora.

< forma>

no válida sin una ‘acción’. Si no tiene la intención de enviarlo a ninguna parte, y no necesita agrupar el nombre del botón de opción, puede omitir por completo el elemento de formulario.

Fuente

2009-09-03 16:09:10 bobince

gracias, buena respuesta. Aunque necesito el formulario para serializar los campos para Ajax. Podría codificarlo manualmente, pero con muchas formas sería un dolor. – sdfor

Gracias a todos los que respondieron. Es revelador que una forma con un solo campo actúe de forma diferente a una forma con muchos campos.

Otra forma de hacer frente a este envío automático, es codificar una función de envío que devuelve falso.

En mi caso, tenía un botón con un evento onclick, así que moví la llamada a la función con la palabra clave return añadida al evento onsubmit. Si la función llamada devuelve falso, el envío no sucederá.

<form onsubmit="return ajaxMagic()"> 
<input type="text" name="partid" id="partid" /> 
<input type="submit" value="Find Part" /> 
</form 

function ajaxMagic() { 
    ... 
    return (false); 
}

Fuente

2009-09-04 22:59:19 sdfor

Este es el código que utilicé utilizaría para resolver el problema:

<form> 
<input type="text" name="partid" id="partid" /> 
<input type="text" name="StackOverflow1370021" value="Fix IE bug" style="{display:none}" /> 
</form>

Fuente

2009-10-12 18:29:15 JeffJak

La solución que encontré para todos los navegadores que he probado (es decir, FF, Chrome, Safari, Opera) es que el primer elemento de entrada type=submit en el formulario debe ser visible y debe ser el primer elemento en el formulario. ¡Pude usar la colocación de CSS para mover el botón de enviar al final de la página y no afectó los resultados!

<form id="form" action="/"> 
<input type="submit" value="ensures-the-enter-key-submits-the-form" 
         style="width:1px;height:1px;position:fixed;bottom:1px;"/> 
<div id="header" class="header"></div> 
<div id="feedbackMessages" class="feedbackPanel"></div> 
    ...... lots of other input tags, etc... 
</form>

Fuente

2011-02-17 01:18:02 bfapp

como vineet ya se dijo, esto se basa en la especificación HTML 2.0:

aquí es cómo evitar que esto suceda, sin atornillar sus URL:

<form> 
    <input type="text" name="partid" id="partid" /> 
    <input type="text" style="display: none;" /> 
</form>

Fuente

2012-08-25 15:27:13 philipphoffmann

Este problema ocurre en tanto IE como Chrome. No ocurre en Firefox. Una solución sencilla sería la de añadir el siguiente atributo a la etiqueta de formulario: onsubmit = "return false"

Eso es, por supuesto, asumiendo que usted envíe el formulario utilizando un objeto XMLHttpRequest.

Fuente

2012-10-10 12:05:18

Sí, forma con un solo campo inputText trabajando como diferente en HTML 4.
onSubmit return false no funciona para mí, pero el fallo por debajo de arreglo está funcionando bien

<!--Fix IE6/7/8 and HTML 4 bug --> 
    <input style="display:none;" type="text" name="StackOverflow1370021" value="Fix IE bug" />

Fuente

2013-05-14 07:13:59

manejé esto mediante el siguiente código pero no estoy seguro de si este es un buen enfoque. Buscando campos de entrada en una forma determinada y si es 1 impide la acción predeterminada.

if($j("form#your-form input[type='text']").length == 1) { 
    $j(this).bind("keypress", function(event) { 
    if(event.which == 13) { 
     event.preventDefault(); 
    } 
    }); 
}

Fuente

2013-06-13 06:40:34 SpreeTheGr8

Creo que es una característica, que también desactivé. No es un gran esfuerzo deshabilitarlo. Solo captura la tecla Intro, ignóralo, lo hará.

Fuente

2014-07-16 23:08:23 lwpro2

No, el comportamiento predeterminado es que al ingresar, se envía la última entrada en el formulario. Si no desea presentar en todo lo que podría añadir:

<form onsubmit="return false;">

o en su entrada

<input ... onkeypress="return event.keyCode != 13;">

Por supuesto que hay más bellos soluciones, pero estos son más simples sin ningún tipo de biblioteca o marco.

Fuente

2016-09-20 21:19:53

Acabo de toparme con este problema para mis sitios web. Me parece que la última versión de Chrome ahora implementa [W # SEC8.2] (https://www.w3.org/MarkUp/html-spec/html-spec_8.html#SEC8.2) que rompió algunas funcionalidades en sitios que estoy desarrollando – David

¿Por qué formularios con solo campo de entrada se someten al presionar la tecla enter en la entrada

Respuesta

Cuestiones relacionadas