jQuery Girl
  1. jQuery Girl
  3. Empêcher les touches fléchées de changer le bouton radio sélectionné
Intereting Posts
Un appel AJAX ne fonctionne pas avec le service Web RESTful? Barre de progression déplaçable utiliser ajax beforeSend pour modifier des données les boutons datatables activent / désactivent l’exemple ne fonctionne pas Autoriser uniquement les nombres et un point en entrée Backbone.js et Require.js: module define () anonyme anonyme: function (_, Backbone) { Les fonctions Ajax telles que .load () suppriment les commentaires du HTML. Comment puis-je conserver les commentaires? La méthode .each () s’applique uniquement au premier élément d’IE Comment appeler une méthode dans une fonction jQuery à partir d’une scope globale? Comment réinitialiser les données-sortinger sur jQuery DataTables? cacher un div en cliquant sur le corps autre que le div Ajouter un en-tête http personnalisé à toutes les demandes AJAX jQuery Comment capturer COMMAND + S dans jQuery? Ne devenant pas 401 non autorisé avec l’appel jajery Cordova jquery, Upto Phonegap 1.4 tout fonctionnait bien Changer uniquement y pos de l’image d’arrière-plan via Jquery

Empêcher les touches fléchées de changer le bouton radio sélectionné

J’ai quelques boutons radio et je voudrais empêcher l’utilisation des touches fléchées haut / bas pour changer le bouton radio sélectionné.

Si vous sélectionnez l’un des boutons radio, puis appuyez sur la touche fléchée haut / bas, le bouton radio précédent ou suivant sera sélectionné. Au lieu de cela, je veux que la sélection rest inchangée. Pour cela, je pourrais simplement utiliser event.preventDefault(); sur certaines touches. Cependant, je souhaite toujours que l’utilisateur puisse faire défiler la page en haut et en bas en appuyant sur les touches fléchées.

Comment je fais ça?

Boutons radio:

Tentative de Javascript (ne fonctionne pas): 

 $(document).keydown(function(e) { var arrowKeys = [37,38,39,40]; if (arrowKeys.indexOf(e.which) !== -1) { $('input[type="radio"]').each(function( index ) { $(this).blur(); }); } });

JsFiddle:

http://jsfiddle.net/w0jh9ney/

L’idée est de supprimer le focus de l’ input et d’éviter le comportement par défaut dans le gestionnaire d’événements keydown input :

Violon . 

 $('input[type="radio"]').keydown(function(e) { var arrowKeys = [37, 38, 39, 40]; if (arrowKeys.indexOf(e.which) !== -1) { $(this).blur(); return false; } });

Mentionné par @ user3346601 solution de contournement pour ne pas faire défiler la première keydown :

Violon . 

 $('input[type="radio"]').keydown(function(e) { var arrowKeys = [37, 38, 39, 40]; if (arrowKeys.indexOf(e.which) !== -1) { $(this).blur(); if (e.which == 38) { var y = $(window).scrollTop(); $(window).scrollTop(y - 10); } else if (e.which == 40) { var y = $(window).scrollTop(); $(window).scrollTop(y + 10); } return false; } }); 
 var disableArrowKeys = function(e){ if($("input[type=radio]").is(':focus')){ if(e.keyCode==37){ e.preventDefault(); window.scrollBy(-100, 0); } else if(e.keyCode==38){ e.preventDefault(); window.scrollBy(0, -100); } else if(e.keyCode==39){ e.preventDefault(); window.scrollBy(100, 0); } else if(e.keyCode==40){ e.preventDefault(); window.scrollBy(0, 100); } } } $(document).keydown(disableArrowKeys);

Je sais que c’est un vieux fil conducteur, mais j’ai trouvé une solution simple après avoir lu tous les commentaires ici et qui profiterait aux futurs visiteurs. Comme l’a dit Regent, ” L’idée est de supprimer le focus de l’entrée “. Il suffit donc de flouter la mise au point après un clic. 

 $('input:radio[name="myradiobtn"]').on('click', function() { $(this).blur(); })