Formulaire HTML avec champ de texte unique + prévention de publication dans Internet Explorer

Question

J'ai remarqué un comportement plutôt étrange dans IE.

J'ai un formulaire HTML avec un champ de texte d'entrée unique et un bouton d'envoi

sur Soumettre cliquez sur Je dois exécuter une fonction JavaScript côté client qui fait le nécessaire.

Maintenant, quand je veux empêcher le postback dans le champ de texte (sur entrer appuyer sur la touche)

J'ai ajouté une presse fonction JavaScript clé qui ressemble à ceci:

---

<input type=text onkeypress="return OnEnterKeyPress(event)" /> 

function OnEnterKeyPress(event) { 
      var keyNum = 0; 
      if (window.event) // IE 
      { 
       keyNum = event.keyCode; 
      } 
      else if (event.which) // Netscape/Firefox/Opera 
      { 
       keyNum = event.which; 
      } 
      else return true; 
      if (keyNum == 13) // Enter Key pressed, then start search, else do nothing. 
      { 
       OnButtonClick(); 
       return false; 
      } 
      else 
       return true; 
     } 

strangly cela ne fonctionne pas.

---

Mais si je passe le champ de texte à la fonction:

<input type=text onkeypress="return OnEnterKeyPress(this,event);" /> 

function OnEnterKeyPress(thisForm,event) { 
      var keyNum = 0; 
      if (window.event) // IE 
      { 
       keyNum = event.keyCode; 
      } 
      else if (event.which) // Netscape/Firefox/Opera 
      { 
       keyNum = event.which; 
      } 
      else return true; 
      if (keyNum == 13) // Enter Key pressed, then start search, else do nothing. 
      { 
       OnButtonClick(); 
       return false; 
      } 
      else 
       return true; 
     } 

Je suis en mesure d'empêcher la publication. Est-ce que quelqu'un peut confirmer ce qui se passe exactement ici?

le formulaire HTML a juste une zone de texte et un bouton soumettre

La résultante o/p de la fonction JavaScript exécutée sur soumettons est affiché dans une zone de texte HTML dans un div séparé.

Answer 1

J'ai trouvé une solution pour ce problème.

Je viens de découvrir que dans IE, si, dans un formulaire, il y a juste un champ de texte et un bouton d'envoi, appuyer sur Entrée entraîne l'envoi du formulaire. Toutefois, s'il existe plusieurs zones de texte, IE ne publie pas automatiquement le formulaire sur la touche Entrée, mais déclenche l'événement onclick du bouton.

Donc, je présente un champ de texte caché dans le formulaire et tout fonctionne magiquement. Je n'ai même pas besoin de gérer l'événement onkeypress pour le champ de texte.

<Form> 
    <input type="text" /> 
    <input type="text" style="display:none"/> 
    <input type="submit" onClick="callPageMethod();return false;"/> 
</Form> 

Cela fonctionne parfaitement pour moi !!

Ce n'est pas un problème dans FF, car une pression sur entrée entraîne directement l'événement onclick du bouton d'appel à soumettre.

Answer 2

Renvoie la valeur false dans le sous-menu qui est utilisé pour envoyer le formulaire via javascript.

Answer 3

Il doit y avoir une interaction avec un autre code que vous n'avez pas publié. Votre code arrête la soumission de formulaire pour moi dans les deux variantes et il n'y a aucune raison que cela ne devrait pas.

Mais piéger Enter presses est difficile à faire correctement et est susceptible de déranger autant que toute autre chose. Il y a presque toujours un meilleur moyen. Par exemple, comme le suggère altCognito, 'form.onsubmit' retourne false afin que le formulaire ne soit jamais soumis en réponse à l'interaction de l'utilisateur. Aussi, si vous mettez votre code AJAX (en supposant que c'est ce que vous faites) dans le gestionnaire onsubmit au lieu de onclick sur un bouton, vous pouvez aussi faire en sorte que presser Entrée a le même effet que cliquer sur le bouton l'utilisateur peut normalement attendre.

Si vous ne le souhaitez pas, il ne semble pas y avoir de raison d'inclure l'élément < form>. Il est parfaitement possible de n'avoir que des éléments d'entrée, si vous ne vous attendez jamais à ce que le navigateur les envoie n'importe où.

Answer 4

venez venir ici à cause d'une observation associée avec au moins IE 7 et 8:

S'il n'y a qu'une seule entrée de texte et un bouton d'envoi sur un formulaire et l'utilisateur appuie la touche Retour, IE ne comprend pas le nom/la paire de valeurs du bouton submit dans la requête. Insead, seule la valeur de l'entrée de texte sera là.

Si j'ajoute une autre entrée de texte, les deux entrées de texte et les paramètres du bouton de soumission sont affichés. La deuxième entrée de texte peut même être masquée: <input type="text" style="display:none"/>

Ceci est donc et non pour les événements, mais plutôt pour la soumission de formulaire simple.

Cela se produit avec GET et POST. L'ajout d'un élément select au formulaire ne modifie pas le comportement. -- très étrange.

Answer 5

Bonjour, vous pouvez également désactiver le comportement par défaut.

jQuery('#yourInput').keydown(function (e) { 
    if (e.keyCode == 13) { 
    e.preventDefault(); 
    } 
}); 

Cheers!