Select2 ouvrir déroulant sur focus
J'ai un formulaire avec plusieurs saisies de texte et quelques select2 éléments.
À l'aide du clavier de l'onglet entre les champs fonctionne très bien - le Select2 élément se comporte comme un élément de formulaire et reçoit le focus lors de la tabulation.
Je me demandais si il est possible d'ouvrir la liste déroulante lors de la Select2 élément reçoit le focus.
Voici ce que j'ai essayé jusqu'à présent:
$("#myid").select2().on('select2-focus', function(){
$(this).select2('open');
});
Mais en utilisant ce code permet le menu déroulant pour ouvrir à nouveau après une sélection est faite.
Vous devez vous connecter pour publier un commentaire.
Code de travail pour v4.0+ *(y compris 4.0.7)
Le code suivant sur le menu de l' initiale de se concentrer, mais ne sera pas coincé dans une boucle infinie lors de la sélection met l'accent une fois le menu se ferme.
Explication
Empêcher L'Infini Se Concentrer Boucle
Note: Le
focus
événement est déclenché deux foisNous pouvons éviter une boucle infinie par la recherche des différences entre les types d'événements de focus. Puisque nous voulons pour ouvrir le menu sur le point initial de la commande, nous avons en quelque sorte la distinction entre les événements déclenchés:
Faire une croix navigateur de manière conviviale est dur, parce que les navigateurs envoyer des informations différentes avec différents événements et aussi Select2 a eu beaucoup de changements mineurs à leur tir d'événements, d'interruption précédente flux.
D'une façon qui semble fonctionner est d'attacher un gestionnaire d'événements au cours de la
fermeture
événement pour le menu et l'utiliser pour capturer l'imminence de lafocus
de l'événement et de l'empêcher de remonter les DOM. Puis, à l'aide d'un délégué à l'écoute, nous allons appeler le centre réel -> code ouvert uniquement quand lafocus
événement bulles tout le chemin jusqu'à ladocument
Empêcher L'Ouverture Des Handicapés Sélectionne
Comme indiqué dans ce github question #4025 - liste Déroulante ne s'ouvre pas sur l'onglet focus, nous devons vérifier pour s'assurer que nous appeler uniquement
'open'
sur:enabled
de sélectionner des éléments comme ceci:Select2 DOM traversée
Nous avons à traverser le DOM un peu, voici une carte de la structure HTML généré par Select2
Le Code Source sur GitHub
Voici certaines des sections de code dans le jeu:
.sur('mousedown'
....trigger('toggle')
.sur('toggle'
....toggleDropdown()
.toggleDropdown
....open()
.sur('focus'
....trigger('focus'
.sur('fermer'
...$de sélection.focus()
Il sert à être le cas que l'ouverture de select2 tiré deux fois, mais il a été fixé dans Question n ° 3503 et qui devrait éviter certaines jank
PR #5357 semble être ce qui a brisé la mise au point du code du travail dans 4.05
Travail de Démonstration dans jsFiddle & Pile Extraits de:
JS:
HTML:
Testé sur Chrome, FF, Edge, IE11
Pour La Version 3.5.4 (Août 30, 2015 et au plus tôt)
La réponse actuelle est applicable uniquement pour les versions 3.5.4 et avant, où select2 tiré le flou et les événements de focus (
select2-focus
&select2-blur
). Il attache une seule fois à l'aide de gestionnaire de$.on
pour attraper le foyer initial, puis replace cours de flou pour des utilisations ultérieures.J'ai essayé à la fois de @irvin-dominin-aka-edward réponses, mais se heurte à deux problèmes (avoir à cliquer sur la liste déroulante deux fois, et que Firefox lance de l'événement n'est pas défini").
J'ai trouvé une solution qui semble résoudre les deux problèmes et n'ont pas courir dans d'autres encore. Ceci est basé sur @irvin-dominin-aka-edward réponses en modifiant la select2Focus fonction de sorte qu'au lieu d'exécuter le reste du code d'emblée, l'envelopper dans un setTimeout.
La démo en jsFiddle & Pile Extraits
JS:
CSS:
HTML:
Quelque chose de facile qui serait à l'œuvre sur tous les select2 instances sur la page.
Mise à JOUR: Le code ci-dessus ne semble pas fonctionner correctement sur IE11/Select2 4.0.3
PS: également ajouté filtre pour sélectionner uniquement
single
sélectionner les champs. Sélectionnez avecmultiple
attribut n'en a pas besoin et serait probablement casser si elle est appliquée.Probablement après la sélection d'un
select2-focus
événement est déclenché.Le seul moyen que j'ai trouvé est une combinaison de
select2-focus
etselect2-blur
événement et le jQueryon
gestionnaire d'événement.Donc la première fois que l'élément obtient le focus, la select2 est ouvert pour un temps (à cause de l'un), lorsque l'élément est floue l'un gestionnaire d'événement est joint de nouveau et ainsi de suite.
Code:
Démo: http://jsfiddle.net/IrvinDominin/fnjNb/
Mise à JOUR
De laisser le clic de la souris, vous devez vérifier l'événement qui déclenche le gestionnaire, il doit le feu de la
open
méthode uniquement si l'événement estfocus
Code:
Démo: http://jsfiddle.net/IrvinDominin/fnjNb/4/
MISE À JOUR POUR SELECT2 V 4.0
select2 v 4.0 a changé son API et abandonné la coutume des événements (voir https://github.com/select2/select2/issues/1908). Il est donc nécessaire de changer la façon de détecter l'accent sur elle.
Code:
Démo: http://jsfiddle.net/IrvinDominin/xfmgte70/
un peu en retard... mais pour partager mon code à l'aide de select2 4.0.0
$('.my-class').next('.select2').find('.select2-selection').focus(function (e) { $(this).closest('.select2').prev('select..my-class').select2('open'); });
(Désolé, apparemment, ne peut pas avoir des sauts de ligne dans les commentaires.)Voici une autre solution pour la version 4.x de Select2. Vous pouvez utiliser des écouteurs pour attraper l'accent événement, puis ouvrir le sélectionner.
Trouver du travail exemple ici en fonction de la exampel créé par @tonywchen
Le problème, c'est que la mise au point interne de l'événement n'est pas transformé à jQuery cas, donc j'ai modifié le plugin et l'ajout de la manifestation thématique à la EventRelay sur la ligne 2063 de Select2 4.0.3:
Ensuite, il suffit d'ouvrir la select2 lorsque le focus se produit:
Fonctionne très bien sur Chrome 54, IE 11, 49 FF, Opera 40
KyleMit réponse a fonctionné pour moi (merci!), mais j'ai remarqué qu'avec select2 d'éléments qui permettent aux fins de la recherche, en essayant de l'onglet de l'élément suivant ne fonctionne pas (de l'ordre de tabulation a été effectivement perdu), j'ai donc ajouté du code pour définir le focus à la select2 élément lorsque la liste est en cours de fermeture:
J'ai essayé un certain nombre de ces et enfin est venu avec la suivante qui fonctionne pour moi avec Select2 4.0.1. l'élément est le
<select>
élément.Pour moi, en utilisant Select2.full.js la Version 4.0.3 aucune des solutions ci-dessus a été de travailler la façon dont il devrait être.
J'ai donc écrit une combinaison des solutions ci-dessus.
Tout d'abord j'ai modifié Select2.full.js pour transférer l'intérieur focus et blur événements jquery événements comme "Thomas Molnar" dans sa réponse.
Et puis j'ai ajouté le code suivant pour gérer focus et blur et de se concentrer à l'élément suivant
une chose importante est de garder la multiselect ouverts tout le temps. La façon la plus simple est de tirer évènement ouvert à tous sur les "conditions" dans votre code:
javascript:
violon: http://jsfiddle.net/xpvt214o/153442/
Cela a fonctionné pour moi, en utilisant Select2 v4.0.3
Fourche de Irvin Dominin la démo: http://jsfiddle.net/163cwdrw/
J'ai eu le problème, qui était de deux ordres:
1. Dans un formulaire avec plusieurs select2 éléments, la liste déroulante ne s'ouvrent pas sur l'onglet, et vous devez appuyer sur la touche espace pour ouvrir
2. Une fois que vous avez fait une sélection, le tabindex ne sera pas honorée et vous devez manuellement, cliquez sur le champ de saisie
Tout l'habitude des suggestions travaillé, je suis venu avec ma propre version, depuis une bibliothèque de script a été de faire la conversion, de la sélection normale d'select2, et donc je n'avais aucun contrôle sur cette initialisation.
Voici le code qui a fonctionné pour moi.
Onglet pour ouvrir
Déplacer à prochaine sur la sélection
Espère que cette aide.
J'ai essayé ces solutions avec la select2 version 3.4.8 et ont constaté que vous ne
blur
, le select2 déclenche la premièreselect2-close
puisselect2-focus
et puisselect2-blur
, donc à la fin on finit réouverture à jamais la select2.Alors, ma solution est celle-ci:
En quelque sorte select2Focus n'a pas de travail ici, avec vide de sélection, ne pouvait pas compris la question, c'est pourquoi j'ai ajouté de contrôle manuel quand, après les événements de focus ouverture automatique est déclenché.
Ici est coffeescript:
J'ai essayé un assez laid solution, mais il fixe mon problème.