Maison  >  Article  >  interface Web  >  Comment désactiver l'appui sur la touche Entrée pour soumettre un formulaire form_javascript

Comment désactiver l'appui sur la touche Entrée pour soumettre un formulaire form_javascript

WBOY
WBOYoriginal
2016-05-16 15:55:481677parcourir

Lors de la soumission automatique, il existe deux possibilités :

La première consiste à écrire du code javascript. Lorsque l'utilisateur clique sur la touche Entrée, la soumission du formulaire est déclenchée via le mécanisme d'écoute des événements js.

La seconde est de profiter du comportement par défaut du navigateur (du moins c'est ce que j'ai trouvé). Les navigateurs ont de nombreux comportements par défaut lors de l'analyse des pages Web. Par exemple, s'il y a un formulaire et un bouton de soumission sur une page, lorsque la page est ouverte, le focus sera automatiquement mis sur le bouton de soumission. De même, s'il n'y a qu'un seul champ de saisie de texte sur une seule ligne (texte) dans un formulaire, le navigateur soumettra automatiquement le formulaire lorsque la touche Entrée est enfoncée dans ce champ de saisie.

Nous connaissons généralement la première situation et elle est facile à comprendre, mais pour le comportement par défaut du deuxième navigateur, moins de personnes peuvent le savoir. Permettez-moi de jeter un œil au navigateur en détail (au moins pour IE). comportement par défaut lors de la soumission du formulaire.

Si le formulaire contient un champ de saisie de texte sur une seule ligne, quel que soit le nombre d'autres types de composants de formulaire qu'il contient, le formulaire sera automatiquement soumis lorsque vous cliquerez sur Entrée dans le champ de saisie.

Par exemple le code suivant :

<form action="" method="post">
<input type="text" name="sdfsdf"/>
<input type="checkbox">sdfsdf
<input type="hidden"name="aa"/></form>

Si le formulaire contient deux champs de saisie de texte sur une seule ligne ou plus, qu'il contienne ou non d'autres types de composants de formulaire, il ne sera pas automatiquement soumis lorsque vous appuyez sur la touche Entrée, par exemple :

<form action="" method="post"
<input type="text"
name="sdfsdf"/
<input type="text"
name="sddf"/</form

La méthode est très simple. Nous l'avons déjà dans l'exemple que nous avons donné ci-dessus. Ajoutez simplement une autre zone de saisie de texte. Vous pouvez dire que pour ne pas soumettre automatiquement, vous devez ajouter une zone de saisie inutile, et elle contient. Deux zones de saisie seront-elles acceptables pour les utilisateurs finaux ? En fait, cela peut être résolu. Vous pouvez masquer la zone de saisie nouvellement ajoutée via le style, par exemple :

<form action="" method="post"
<input type="text" name="notautosubmit"
style="display:none"/
<input type="text"
name="username"/</form

Il existe également une méthode pour lier l'événement déclencheur du bouton Entrée :
document.onkeypress = function(){
if(event.keyCode == 13) {search();returnfalse;}} où la méthode de recherche est l'événement onclick :

Solution finale :

<script language="javascript"> 
  function defineSubmit(btn) 
  { 
    if("submit1" == btn.value) 
    { 
      document.testForm.action="firstAction"; 
    } 
    else 
    { 
      document.testForm.action="secondAction"; 
    } 
     
    document.testForm.submit(); 
  } 
</script> 
<form name="testForm" method="post"> 
    username:<input type="text" name="username"/> 
    password:<input type="password" name="password"/> 
    <input type="button" name="submitName" onclick="defineSubmit(this)" value="submit1"/> 
    <input type="button" name="submitName" onclick="defineSubmit(this)" value="submit2"/> 
</form> 

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn