Al presionar Intro dentro de un cuadro de texto no se activa el evento de clic del botón Enviar en Firefox

StackOverflow https://stackoverflow.com/questions/1642815

Pregunta

Tengo esta página html que es muy simple, contiene un cuadro de texto y un botón de enviar, lo que quiero es escribir algo en el cuadro de texto y presionar enter en la función en el evento onclick del botón. Está funcionando en IE y Google Chrome, pero no funciona en Firefox, ¿es este un comportamiento normal de Firefox o hay algo que falta aquí? 

<html>
<head>
<script language="javascript">
function callMe()
{
   alert("You entered: " + document.getElementById("txt").value);
}
</script>
</head>
<body>
<input type="text" id="txt" />
<input type="submit" value="Submit" onclick="callMe()" />
</body>
</html>
¿Fue útil?

Solución

De la descripción de la onclick evento :

  

El evento onsubmit ocurre cuando se hace clic en el botón del dispositivo señalador sobre un elemento. Este atributo se puede usar con la mayoría de los elementos.

No hay garantía de que la UA genere dicho evento incluso cuando no use un dispositivo señalador y haga clic en algo.

Probablemente desee el evento FORM en un formulario:

  

El evento <=> ocurre cuando se envía un formulario. Solo se aplica al elemento <=> .

Sin embargo, deberá ajustar un formulario alrededor de su campo de texto y botón: 

<html>
  <head>
    <script language="javascript">
      function callMe()
      {
        alert("You entered: " + document.getElementById("txt").value);
      }
    </script>
  </head>
  <body>
    <form onsubmit="callMe()" action="#">
      <input type="text" id="txt" />
      <input type="submit" value="Submit" />
    </form>
  </body>
</html>

Otros consejos

Intente agregar un formulario con un envío: esto debería funcionar (probado con FF 3.5): 

<html>
<head>
<script language="javascript">
function callMe()
{
   alert("You entered: " + document.getElementById("txt").value);
}
</script>
</head>
<body>
<form onsubmit="callMe()">
<input type="text" id="txt" />
<input type="submit" value="Submit" />
</form>
</body>
</html>

[edit Inicialmente no entendí la situación y publiqué una respuesta diferente.]

Tampoco funciona en Chrome para mí (4.0.223.11).

El problema es la diferencia en el tratamiento de < input > s sin < form > - si agrega un < form > elemento, el elemento onclick se dispara (aún debe usar el controlador de envío del formulario en su lugar, como Johannes R & # 246; ssel recomienda con razón.

[edit agregó una nota sobre HTML5]

Tenga en cuenta que la especificación HTML5 menciona el envío del evento de clic en el botón de envío :

Los agentes de usuario pueden establecer un botón en cada formulario como el botón predeterminado del formulario. Este debería ser el primer botón de envío en orden de árbol cuyo propietario de formulario es ese elemento de formulario, pero los agentes de usuario pueden elegir otro botón si otro sería más apropiado para la plataforma. Si la plataforma admite permitir que el usuario envíe un formulario implícitamente (por ejemplo, en algunas plataformas presionando la tecla & Quot; enter & Quot; mientras un campo de texto está enfocado, envía el formulario implícitamente), entonces hacerlo debe causar el comportamiento de activación del botón predeterminado del formulario, si lo hay, para ejecutarse.

Tenga en cuenta que no es necesario implementar la activación basada en Enter (aunque se implementa en los navegadores de escritorio), y el " método de activación " (evento de clic) se puede usar cuando la entrada es parte de un formulario (" tiene un propietario de formulario "). La definición de & Quot; propietario del formulario & Quot; se basa en tener un < form > padre o un form atributo.

No veo la discusión que condujo a esta decisión, así que si tiene preguntas, puede preguntar en la lista de correo public-html donde se discute la especificación.

Hasta donde yo sé, no se puede llamar 'OnClick' dentro de un 'TextBox'. Tiene que estar fuera del cuadro de texto.

Si escribe su texto en TextBox, haga clic con el botón izquierdo del mouse en otro lugar de su página, luego presione Enter, el evento OnClick funcionará, curiosamente.

Si encuentra una solución, háganoslo saber.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top