jQuery Girl
  1. jQuery Girl
  3. changement d’événement non déclenché sur la clé de retour
Intereting Posts
Que doivent faire le prototype, $ .extend et «return this»? Problème de positionnement des tabs et des boîtes jquery comment jquery retourne-t-il un tableau des éléments sélectionnés JSDOM et jQuery ne fonctionnent pas ensemble jquery – Actions collectives multiples Quelle est la réponse ajax lors de la fermeture du navigateur au milieu d’un appel? AJAX liste mise à jour, obtenir de nouveaux éléments et compte Info-bulle JQuery prenant en charge la nouvelle ligne Marqueur de position Javascript sur image onclick Comment mettre le texte défilant dans la balise de titre? Hauteur d’élément incorrecte par rapport à une directive avec jQuery Comment charger la boîte de dialog JQuery dans WordPress avec wp_enqueue_script? Détecter et supprimer les URL de textarea Est-il possible de trouver les gestionnaires d’événements d’un élément avec Javascript? Lorsque vous utilisez jquery-ui droppable, comment pouvez-vous supprimer un élément de la zone de repository après l’avoir déjà déposé?

changement d’événement non déclenché sur la clé de retour

J’ai une zone de texte avec un événement de changement jQuery lié. 

$('#txtAccountNo').change(function(){ $('label[for="txtAccountNo"]').append('loading...') });

L’événement fonctionne lorsque la zone de texte perd le focus, c’est-à-dire que l’utilisateur clique dessus avec la souris ou utilise la touche de tabulation. Mais lorsque la touche Retour est enfoncée, l’événement n’est pas déclenché. Quelqu’un peut-il m’aider à résoudre ceci s’il vous plaît?

C’est le comportement standard pour l’événement change . Si vous souhaitez capturer chaque pression sur la keypress Entrée , vous devez utiliser l’événement de keypress : 

 $('#txtAccountNo').on('change keypress', function(e) { if (e.type == 'change' || (e.type == 'keypress' && e.which == 13)) { $('label[for="txtAccountNo"]').append('loading...') } });

Comme vous l’avez souligné, l’événement de change n’est déclenché que lorsqu’une entrée de texte perd le focus. Vous devriez plutôt vous keyup à keyup : 

 $('#txtAccountNo').on('keyup', function() { $('label[for="txtAccountNo"]').append('loading...') });

En tant que post-scriptum, il est probablement sage de conserver également l’événement change , car vous voudrez probablement également exécuter la fonctionnalité lorsque quelqu’un colle du texte dans la zone de texte. Vous pouvez le faire en utilisant: 

 $('#txtAccountNo').on('keyup change', function() { ... });

En fait, dans les navigateurs modernes, et jQuery (qui semble être utilisé dans la question) supérieur à 1,7, le bouton de retour validera la modification sans qu’il soit nécessaire de perdre le focus, le code devrait fonctionner. 

  $("input").change( function() { $("output").val( $("input").val() ); })

Découvrez le test simple ici: http://jsfiddle.net/4vBSm/2/

Cela ne se produit pas dans IE 9 et inférieur cependant. (Et jQuery ne va pas résoudre ce problème http://bugs.jquery.com/ticket/11556 )

Comme indiqué dans la réponse de Matthew, le problème se pose dans IE9 et les versions antérieures, mais pas dans les navigateurs modernes. Je suggérerais la solution ci-dessous, qui appenda simplement cette fonctionnalité à tous les navigateurs: 

 $('input[type=text]').on('keypress', function (e) { var $input = $(this); if (e.which == 13) { // Enter was hit $input.sortinggger('change'); } });

Il écoute les touches sur les entrées de texte et, si vous appuyez sur Entrée , il déclenche un événement de modification.