Pressionar Enter dentro de uma caixa de texto não dispara o evento OnClick do botão Enviar no Firefox

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

Pergunta

Eu tenho essa página HTML, que é muito simples, ela contém uma caixa de texto e um botão de envio, o que eu quero é digitar algo na caixa de texto e pressionar Enter a função no evento OnClick do botão é chamado. Está funcionando no IE e no Google Chrome, mas não no Firefox, esse é um comportamento normal do Firefox ou há algo que está faltando aqui?

<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>
Foi útil?

Solução

De descrição de onclick evento:

o onclick O evento ocorre quando o botão do dispositivo apontador é clicado por um elemento. Este atributo pode ser usado com a maioria dos elementos.

Não há garantia de que a UA deve gerar esse evento mesmo quando não usando um dispositivo apontador e clicando em algo.

Você provavelmente quer o onsubmit evento em um formulário:

o onsubmit O evento ocorre quando um formulário é enviado. Ele só se aplica ao FORM elemento.

Você precisará envolver um formulário em torno de seu campo de texto e botão:

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

Outras dicas

Tente adicionar um formulário com um OnSubmit - isso deve funcionar (testado com 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>

Editar inicialmente eu entendi mal a situação e publiquei uma resposta diferente.

Também não funciona no Chrome para mim (4.0.223.11).

O problema é a diferença no tratamentou003Cinput> S sem au003Cform> - Se você adicionar um anexou003Cform> Elemento, o OnClick Element Fires (você ainda deve usar o manipulador de envio do formulário, como Johannes Rössel recomenda corretamente.

Edit adicionou uma nota sobre HTML5

Observe que Especificações html5 mencionando a expedição do evento de clique no botão de envio:

Os agentes do usuário podem estabelecer um botão de cada formulário como sendo o botão padrão do formulário. Este deve ser o primeiro botão de envio em ordem de árvore cujo proprietário do formulário é esse elemento de formulário, mas os agentes do usuário podem escolher outro botão se outro for mais apropriado para a plataforma. Se a plataforma suportar permitir que o usuário envie um formulário implicitamente (por exemplo, em algumas plataformas que atingem a tecla "Enter" enquanto um campo de texto é focado implicitamente o formulário), então isso deve causar o comportamento de ativação do botão padrão do formulário, se houver, se houver, se houver, se houver), se houver isso, deve causar o comportamento de ativação do botão padrão, se houver, se houver, se houver) , para ser executado.

Observe que a implementação da ativação baseada em Enter não é necessária (embora seja implementada nos navegadores da área de trabalho) e o "método de ativação" (evento de clique em clique) pode ser usado quando a entrada é parte de um formulário ("tem um proprietário de formulário" ). A definição do "proprietário do formulário" é baseada em ter umu003Cform> pai ou a form atributo.

Não vejo a discussão que levou a essa decisão; portanto, se você tiver dúvidas, poderá perguntar na lista de discussão do HTML público em que as especificações são discutidas.

Até onde eu sei, você não pode chamar 'OnClick' dentro de uma 'caixa de texto'. Tem que estar fora da caixa de texto.

Se você digitar seu texto na caixa de texto, o mouse esquerdo clique em outro lugar na sua página e pressione Enter, o evento OnClick funcionará, por incrível que pareça.

Se você encontrar um trabalho, informe -nos.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top