¿Por qué los formularios con un solo campo de entrada se envían al presionar la tecla Entrar en la entrada?

¿Por qué un

con un solo campo volverá a cargar el formulario cuando el usuario ingrese un valor y presiona la tecla Enter , y no lo hace si hay 2 o más campos en el

?

Escribí una página simple para probar esta rareza.

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

     testFormEnter       

2 field form works fine

One field form reloads page when you press the Enter key why

Este 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.

Este es un error conocido en 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.

Actualizar

En caso de que se esté preguntando por qué este es el caso, esta gem viene directamente de la especificación de HTML 2.0 (Sección 8.2) :

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

Presionar Enter 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 lo envía.

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

Inválido 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.

Aquí está el código que utilicé para resolver el problema:

 

No, el comportamiento predeterminado es que al ingresar, se envía la última entrada en el formulario. Si no desea enviar nada, puede agregar:

 

O en su entrada

  

Por supuesto, hay soluciones más hermosas, pero son más simples sin biblioteca ni marco.

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 que se envía a sí mismo, 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.

como vineet ya se dijo, esto está enraizado en la especificación html 2.0:

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

 

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

Otra forma de lidiar con 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 de return agregada al evento onsubmit. Si la función llamada devuelve falso, el envío no sucederá.

 

La solución que encontré para todos los navegadores que probé (IE, 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 del 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!

 
...... lots of other input tags, etc...

Este problema ocurre tanto en IE como en Chrome. No ocurre en Firefox. Una solución simple sería agregar el siguiente atributo a la etiqueta del formulario: onsubmit = “return false”

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

Sí, formulario con un solo campo inputText que funciona de forma diferente en HTML 4.
onSubmit return false no funciona para mí, pero el error de reparación a continuación funciona bien

   

Manejé esto con el siguiente código, pero no estoy seguro de si este es un buen enfoque. Al buscar campos de entrada en una forma determinada y si su 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(); } }); } 

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á.