72 votes

Désactiver la soumission du formulaire avec la touche Entrée sur seulement quelques champs

Je veux garder le classique "formulaire soumet lorsque j'appuie sur Enter' comportement parce que les utilisateurs sont familiers avec. Mais par réflexe, ils ont souvent la touche entrée quand ils ont fini avec une zone de saisie de texte - mais avant qu'ils sont fait avec la forme complète.

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

À la recherche des Questions Connexes cela ressemble à ce que je suis à la recherche de:

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

mais l' if (document.addEventListener) { partie est inconnu pour moi.

134voto

Nick Craver Points 313913

Vous pouvez capturer et annuler l'entrée keypress sur les champs suivants:

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

Puis, sur vos entrées, donnez-leur un class="noEnterSubmit" :)

En regardant au cas où d'autres trouveraient cela plus tard, dans jQuery 1.4.3 (pas encore sorti), vous pouvez le raccourcir à ceci:

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

3voto

Kailas Mane Points 358

Ajoutez simplement le code suivant dans les balises <Head> de votre code HTML. Il soumettra le formulaire sur Entrer la clé Pour tous les champs du 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>
 

1voto

Silas Palmer Points 331

Pour autoriser la saisie 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;   
        }
    });
});
 

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X