2010-05-08 5 views
67

Je souhaite conserver le comportement conventionnel «formulaire soumis lorsque j'appuie sur Entrée» car les utilisateurs sont familiers avec. Mais par réflexe, ils frappent souvent entrer quand ils finissent avec une boîte de saisie de texte - mais avant qu'ils ne soient réellement fait avec le formulaire complet.Désactiver la soumission de formulaire via la touche Entrée dans les champs _some

Je voudrais détourner la touche Entrée uniquement lorsque le focus est sur une certaine classe d'entrée.

Vous cherchez Related Questions cela ressemble à ce que je cherche:

if (document.addEventListener) { 
    document.getElementById('strip').addEventListener('keypress',HandleKeyPress,false); 
} else { 
    document.getElementById('strip').onkeypress = HandleKeyPress; 
} 

mais la partie if (document.addEventListener) { ne connaît pas pour moi.

+2

Cela s'appelle la détection de caractéristique. Si le navigateur utilise la syntaxe 'addEventListener()' pour ajouter des écouteurs d'événement, il y aura un objet de fonction appelé 'addEventListener' dans chaque objet noeud DOM (et plus précisément, dans l'objet document). Un objet fonction devient vrai lorsqu'il est converti en un booléen, donc la première branche s'exécute. Si le navigateur ne comprend pas la syntaxe addEventListener, 'document.addEventListener' sera non défini (ce qui convertit en faux) et le code de repli dans la seconde branche sera exécuté. – Tgr

+0

Apprécie beaucoup l'explicable. THX! – justSteve

Répondre

127

Vous pouvez capturer et annuler entrer keypress sur ces domaines comme celui-ci:

$('.noEnterSubmit').keypress(function(e){ 
    if (e.which == 13) return false; 
    //or... 
    if (e.which == 13) e.preventDefault(); 
}); 

ensuite sur vos entrées juste leur donner un class="noEnterSubmit" :)

À l'avenir, dans d'autres cas trouver plus tard, en jQuery 1.4.3 (pas encore), vous pouvez le raccourcir à ceci:

$('.noEnterSubmit').bind('keypress', false); 
+46

Vous devez également garder à l'esprit que 'bind ('keypress', false);' interdira toute saisie de données. Donc, si vous voulez appliquer ceci aux éléments de saisie de texte, utilisez la première solution – hohner

+4

Si vous utilisez des champs dynamiques, vous devriez changer ceci en '$ ('body'). On ('keypress', '.noEnterSubmit', function () {...}); ' – seangates

+3

L'utilisation d'une classe n'est pas appropriée pour le contrôle sémantique. Mieux utiliser data-nosubmit ou un attribut de données HTML 5 similaire pour cela. $ ('[data-nosubmit]') est le sélecteur, alors. –

1

pour permettre entrez uniquement sur une classe spécifique (dans cet exemple, 'enterSubmit'):

jQuery(document).ready(function(){ 
    jQuery('input').keypress(function(event){ 
     var enterOkClass = jQuery(this).attr('class'); 
     if (event.which == 13 && enterOkClass != 'enterSubmit') { 
      event.preventDefault(); 
      return false; 
     } 
    }); 
}); 
3

il suffit d'ajouter le code suivant dans <Head> Tag dans votre code HTML. Il formera la soumission sur la touche Entrée Pour tous les champs sur le formulaire

<script type="text/javascript"> 
    function stopEnterKey(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")) { return false; } 
    } 
    document.onkeypress = stopEnterKey; 
</script> 
Questions connexes