Appuyer sur entrer dans une zone de texte ne déclenche pas l'événement onclick du bouton d'envoi dans Firefox

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

Question

J'ai cette page HTML qui est très simple, elle contient une zone de texte et un bouton d’envoi. Ce que je veux, c’est de taper quelque chose dans cette zone et d’appuyer sur Enter pour activer la fonction dans l’événement onclick du bouton. Cela fonctionne dans IE et Google Chrome mais pas dans FireFox, s'agit-il d'un comportement normal de FireFox ou y a-t-il quelque chose qui manque? 

<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>
Était-ce utile?

La solution

Extrait de la description de la onclick événement :

  

L'événement onsubmit se produit lorsque le bouton du périphérique de pointage est cliqué sur un élément. Cet attribut peut être utilisé avec la plupart des éléments.

Rien ne garantit que l'agent utilisateur générera un tel événement même si ne pas utiliser un périphérique de pointage et cliquer sur un élément.

Vous voulez probablement l’événement FORM sur un formulaire:

  

L'événement <=> se produit lors de l'envoi d'un formulaire. Cela s'applique uniquement à l'élément <=> . .

Vous devrez enrouler un formulaire autour de votre champ de texte et de votre bouton, cependant: 

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

Autres conseils

Essayez d’ajouter un formulaire avec onsubmit - cela devrait fonctionner (testé avec 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>

[modifier Au départ, j'ai mal compris la situation et posté une réponse différente.]

Ne fonctionne pas non plus dans Chrome pour moi (4.0.223.11).

Le problème réside dans la différence de traitement de < entrée > s sans < form > - si vous ajoutez un < form > élément, l'élément onclick est déclenché (vous devez toujours utiliser le gestionnaire de soumission du formulaire, comme le recommande Johannes R & # 246; ssel le recommande à juste titre.

[Modifier a ajouté une note à propos de HTML5]

Notez que Une spécification HTML5 mentionne l'envoi de l'événement click sur le bouton d'envoi :

Les agents utilisateurs peuvent définir un bouton dans chaque formulaire comme étant le bouton par défaut du formulaire. Il doit s'agir du premier bouton d'envoi dans l'ordre de l'arborescence dont le propriétaire du formulaire est cet élément de formulaire, mais les agents utilisateurs peuvent en choisir un autre si un autre serait plus approprié pour la plate-forme. Si la plate-forme accepte que l'utilisateur soumette un formulaire implicitement (par exemple, sur certaines plates-formes, appuyez sur la touche & "Entrée &"; Lorsqu'un champ de texte est activé, le formulaire est soumis de manière implicite). Le comportement d'activation du bouton par défaut du formulaire, le cas échéant, à exécuter.

Notez que la mise en œuvre de l'activation par Enter n'est pas obligatoire (même si elle est implémentée dans les navigateurs de bureau), et la & "méthode d'activation &"; (click event) peut être utilisé lorsque l'entrée fait partie d'un formulaire (& "; a un propriétaire de formulaire &";). La définition du & Quot; propriétaire du formulaire & Quot; est basé sur le fait d'avoir < form > parent ou un form attribut.

Je ne vois pas la discussion qui a conduit à cette décision. Par conséquent, si vous avez des questions, vous pouvez les poser sur la liste de diffusion public-html où les spécifications sont discutées.

Pour autant que je sache, vous ne pouvez pas appeler "OnClick" dans une "zone de texte". Il doit être en dehors de la zone de texte.

Si vous tapez votre texte dans la zone de texte, cliquez avec le bouton gauche de la souris sur un autre endroit de votre page, puis appuyez sur Entrée, l'événement OnClick fonctionnera à merveille.

Si vous trouvez un moyen de contourner le problème, veuillez nous le faire savoir.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top