Empêcher l'envoi d'un bouton sur la touche d'entrée

Question

J'ai deux boutons un avec id = enterToSubmit et l'autre avec id = clickToSubmit. Quand un utilisateur appuie sur la touche enter, je veux que le bouton "enterToSubmit" envoie le formulaire et pas le bouton "clickToSubmit". Sur la même page, j'ai une id textbox = title, et sur le chargement de la page je cache le bouton "enterToSubmit", jusqu'à ce que l'utilisateur entre quelque chose dans la zone de texte, les utilisateurs peuvent appuyer sur Entrée pour envoyer le formulaire.

Comment éviter que le bouton "clickToSubmit" ne soit envoyé lorsque les utilisateurs appuient sur la touche Entrée?

Answer 1

Malheureusement, vous ne pouvez pas changer le bouton submit 'par défaut' en HTML, c'est toujours le premier input/button avec le type submit/image. Alors que vous pouvez essayer de saisir manuellement les événements keypress, il est très peu fiable, car Enter n'est pas toujours supposé soumettre un formulaire, selon (a) quel type d'élément est ciblé, (b) si shift/ctrl + enter est utilisé, (c) quels autres éléments sont dans le formulaire et (d) de quel navigateur il s'agit. Si vous manquez un cas, vous obtiendrez des soumissions par défaut accidentelles; Si vous frappez un cas que vous ne devriez pas, vous obtiendrez des soumissions accidentelles.

Il est donc généralement préférable, lorsque vous souhaitez contrôler l'action de soumission par défaut d'un formulaire, de placer un bouton supplémentaire en tant que premier bouton de soumission dans le formulaire. Si vous ne souhaitez pas que ce bouton s'affiche, vous pouvez le positionner avec une valeur left négative importante pour le repousser du côté de la page. (Ceci est un peu moche, mais cachant via display ou visibility arrêtera fonctionner dans certains navigateurs.)

Alors peut-être que vous pourriez « cacher » l'entrer à bouton d'envoi non en faisant disparaître, mais en le poussant hors de la page où il ne peut pas être vu, puis en attrapant l'événement click sur return false et arrêter la soumission du formulaire.

Answer 2

Comment prévenir "clickToSubmit" le bouton à envoyer lorsque les utilisateurs appuient sur la touche Entrée?

Essayez ceci:

$("#clickToSubmit").keypress(function(e){ 
    if(e.keyCode === 13){ 
     e.preventDefault(); 
    } 
}); 

Answer 3

Essayez ce code pour zone de texte entrer

$j("#title").keypress(function(e1){ 
    if(e1.keyCode==13){   // if user is hitting enter 
     return false; 
    } 
}); 

pour le bouton d'envoi

$j("#clickToSubmit").submit(function(e1){ 
    if(e1.keyCode==13){   // if user is hitting enter 
     return false; 
    } 
}); 

Answer 4

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

Answer 5

D'abord, vous devez assurez-vous que les deux boutons ne sont pas de type submit. Maintenant, sur ces deux boutons, vous pouvez appeler deux fonctions javascript différentes. enterToSubmit() et clickToSubmit() voient aussi que sur enterToSubmit() vous lisez la touche entrée, appuyez sur

if (e.keyCode === 13) { form.submit(); }

et appelez form.submit()

pendant clickToSubmit() vous faites une form.submit directe()

Answer 6

$('#formId').on('keyup keypress', function(e) { 
      var keyCode = e.keyCode || e.which; 
      if (keyCode === 13) { 
      e.preventDefault(); 
      return false; 
      } 
     }); 



Usually form is submitted on Enter when you have focus on input 
elements. 
We can disable Enter key (code 13) on input elements within a form. 

En outre, comme la soumission de formulaire n'est pas empêché, il est plus sûr d'ajouter dans certaines versions plus récentes de Firefox l'événement keypress à la forme aussi bien.