web-dev-qa-db-fra.com

jquery désactiver le formulaire soumettre à entrer

J'ai le javascript suivant dans ma page qui ne semble pas fonctionner.

$('form').bind("keypress", function(e) {
  if (e.keyCode == 13) {               
    e.preventDefault();
    return false;
  }
});

Je voudrais désactiver l'envoi du formulaire sur enter, ou mieux encore, appeler mon formulaire ajax pour le soumettre. L'une ou l'autre solution est acceptable, mais le code que j'inclus ci-dessus n'empêche pas le formulaire de le soumettre.

javascriptjqueryformsform-submit
196
Adam Levitt

Si keyCode n'est pas intercepté, attrapez which:

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

EDIT: raté, il vaut mieux utiliser keyup au lieu de keypress

EDIT 2: Comme dans certaines versions plus récentes de Firefox, l'envoi du formulaire n'est pas empêché, il est également plus sûr d'ajouter l'événement de frappe au formulaire. En outre, cela ne fonctionne pas (plus?) En liant simplement l'événement au formulaire "nom" mais uniquement à l'identifiant du formulaire. C'est pourquoi j'ai rendu cela plus évident en modifiant l'exemple de code de manière appropriée.

EDIT 3: Modifié bind() en on()

399
zessx

Habituellement, le formulaire est soumis le Enter lorsque vous vous concentrez sur les éléments d’entrée.

Nous pouvons désactiver Enter touche (code 13) sur les éléments d’entrée d’un formulaire:

$('form input').on('keypress', function(e) {
    return e.which !== 13;
});

DEMO: http://jsfiddle.net/bnx96/325/

59
VisioN

Encore plus court:

$('myform').submit(function() {
  return false;
});
43
user1017926
$('form').keyup(function(e) {
  return e.which !== 13  
});

La propriété event.which normalise event.keyCode et event.charCode. Il est recommandé de regarder event.which pour la saisie au clavier.

which docs.

23
gdoron
$(document).on('keyup keypress', 'form input[type="text"]', function(e) {
  if(e.which == 13) {
    e.preventDefault();
    return false;
  }
});

Cette solution fonctionne sur tous les formulaires sur le site Web (également sur les formulaires insérés avec ajax), empêchant uniquement les saisies dans les textes saisis. Placez-le dans une fonction de préparation de document et oubliez ce problème pour la vie.

14
Buzogany Laszlo

La surexploitation de devoir capturer et tester chaque frappe de touche ENTER me bogue vraiment, ma solution repose donc sur le comportement suivant du navigateur:

Appuyez sur ENTER pour déclencher un événement click sur le bouton d'envoi (testé dans IE11, Chrome 38, FF 31) ** (ref: http://mattsnider.com/how-forms-submit-when-pressing-enter/ )

Ma solution consiste donc à supprimer le bouton d'envoi standard (c'est-à-dire <input type="submit">) afin que le comportement ci-dessus échoue, car aucun bouton d'envoi ne permet de cliquer comme par magie lorsque vous appuyez sur la touche Entrée. Au lieu de cela, j'utilise un gestionnaire de clics jQuery sur un bouton standard pour soumettre le formulaire via la méthode .submit() de jQuery.

<form id="myform" method="post">
  <input name="fav_color" type="text">
  <input name="fav_color_2" type="text">
<button type="button" id="form-button-submit">DO IT!</button>
</form>

<script>
 $('#form-button-submit').click(function(){
    $('#myform').submit();
  });
</script>

Démo: http://codepen.io/anon/pen/fxeyv?editors=101

** ce comportement n'est pas applicable si le formulaire comporte un seul champ de saisie et que ce champ est une entrée 'texte'; dans ce cas, le formulaire sera soumis à la touche Entrée même si aucun bouton d'envoi n'est présent dans le balisage HTML (par exemple, un champ de recherche). Cela a été le comportement standard du navigateur depuis les années 90.

7
Costa

La plupart des réponses ci-dessus empêchent les utilisateurs d'ajouter de nouvelles lignes dans un champ textarea. Si vous souhaitez éviter ce problème, vous pouvez exclure ce cas particulier en vérifiant quel élément est actuellement actif:

var keyCode = e.keyCode || e.which;
if (keyCode === 13 && !$(document.activeElement).is('textarea')) {
  e.preventDefault();
  return false;
}
6
jean-baptiste

si vous voulez simplement désactiver le bouton submit on enter et submit, utilisez également l'événement onsubmit du formulaire.

<form onsubmit="return false;">

Vous pouvez remplacer "return false" par un appel à la fonction JS qui fera le nécessaire et également soumettre le formulaire à la dernière étape.

4
Perica Zivkovic

Vous pouvez le faire parfaitement en Javascript pur, simple et aucune bibliothèque requise. Voici ma réponse détaillée pour un sujet similaire: Désactivation de la touche Entrée du formulaire

En bref, voici le code:

<script type="text/javascript">
window.addEventListener('keydown',function(e){if(e.keyIdentifier=='U+000A'||e.keyIdentifier=='Enter'||e.keyCode==13){if(e.target.nodeName=='INPUT'&&e.target.type=='text'){e.preventDefault();return false;}}},true);
</script>

Ce code est destiné à empêcher la touche "Entrée" pour le type d'entrée = 'texte' uniquement. (Le visiteur peut avoir besoin d'appuyer sur Entrée sur la page.) Si vous souhaitez désactiver également "Entrée" pour d'autres actions, vous pouvez ajouter console.log (e); Pour vos besoins de test, appuyez sur F12 en chrome, accédez à l'onglet "Console", cliquez sur "retour arrière" sur la page et regardez à l'intérieur pour voir les valeurs renvoyées. Vous pouvez ensuite cibler tous ces paramètres pour améliorer encore le code. ci-dessus selon vos besoins pour "e.target.nodeName" , "e.target.type" et beaucoup d'autres ...

4
Tarik

Je ne sais pas si vous résolvez déjà ce problème, ou si quelqu'un tente de le résoudre maintenant, mais voici ma solution!

$j(':input:not(textarea)').keydown(function(event){
    var kc = event.witch || event.keyCode;
    if(kc == 13){
    event.preventDefault();
        $j(this).closest('form').attr('data-oldaction', function(){
            return $(this).attr('action');
        }).attr('action', 'javascript:;');

        alert('some_text_if_you_want');

        $j(this).closest('form').attr('action', function(){
            return $(this).attr('data-oldaction');
        });
        return false;
    }
});
3
Don Marcony Neves

Dans Firefox, lorsque vous entrez et que vous appuyez sur Entrée, le formulaire supérieur est envoyé. La solution est dans le formulaire de soumission, ajoutez ceci:

<input type="submit" onclick="return false;" style="display:none" />
1
wade

3 ans plus tard et pas une seule personne n'a répondu complètement à cette question.

Le demandeur souhaite annuler la soumission de formulaire par défaut et appeler son propre Ajax. C'est une demande simple avec une solution simple. Il n'est pas nécessaire d'intercepter chaque caractère saisi dans chaque entrée.

En supposant que le formulaire comporte un bouton d'envoi, qu'il s'agisse d'un <button id="save-form"> ou d'un <input id="save-form" type="submit">, faites:

$("#save-form").on("click", function () {
    $.ajax({
        ...
    });
    return false;
});
1
derekm

Le code suivant annulera l'utilisation de la touche Entrée pour soumettre un formulaire, mais vous permettra néanmoins d'utiliser la touche Entrée dans une zone de texte. Vous pouvez le modifier en fonction de vos besoins.

<script type="text/javascript">
        function stopRKey(evt) {
          var evt = (evt) ? evt : ((event) ? event : null);
          var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);
          if ((evt.keyCode == 13) && ((node.type=="text") || (node.type=="radio") || (node.type=="checkbox")) )  {return false;}
        }

        document.onkeypress = stopRKey;
</script>
1
Radish

Le moyen le plus simple est de changer le type de bouton en bouton - en html, puis d'ajouter un événement en js ...

Changer de ceci:

<form id="myForm">
   <button type="submit">Submit</button>
</form>

À

<form id="myForm">
   <button type="button" id="btnSubmit">Submit</button>
</form>

Et dans js ou jquery, ajoutez:

("#btnSubmit").click(function () {
    $('#myForm').submit();
});
0
Zvi Redler