11521 sujets

JavaScript, DOM et API Web HTML5

Déclencher l'ouverture d'un select via js

Hello

je cherche à déclencher l'ouverture d'un select via jquery, mais en cliquant via un bouton.
Pour info je fais ça pour tablette et mobile, donc au touch sur ce bouton.

Cela ne fonctionne pas avec click();
Cela fonctionne uniquement avec focus() sur iOS.

Une idée? merci Smiley smile 


$('.mon_bouton').on('click touch', function() {
    $('#mon_select').focus();
});
Modérateur
Bonjour, la méthode click() de jQuery ne s'applique que aux évènements attachés avec jQuery.

Une solution pour déclencher des évènements avait été développée et commencée à être implémentée sur Chrome mais cela a été abandonnée, pour cause de problèmes de sécurité évidentes.

De plus, le select est un élément géré par le navigateur qui peut changer de nature (par exemple sur IOS) selon le navigateur et dans le temps. Tout bricolage visant à obtenir cet effet prendra le risque de devenir ineffectif dans le futur.

La seule alternative est de créer ou d'utiliser un select custom, mais attention à l'accessibilité. Il faut se demander si cette fonctionnalité est vraiment nécessaire.
Meilleure solution
Merci Kustolovic pour ces excellentes informations.

Effectivement après quelques recherches de mon côté, j'en suis arrivé au même point... passer par un select custom.

Concernant sa nécessité, en fait je travaille sur une app (qui sera donc convertie pour les différentes plateformes), dans laquelle j'ai à un moment donné un horaire à choisir. Je suis passé par un champs input time dans un premier temps, c'est sympa car cela utilise du coup l'ui dédié aux horaires pour chaque os, mais les paramètres min/max/steps ne sont pas pris en compte, j'ai donc laissé tomber. Je me suis alors dirigé vers le select, et effecivement un select custom me paraît plus judicieux...

A moins qu'il y ait encore mieux à faire mais je ne vois pas.
Modifié par Pedrothelion (19 Jul 2019 - 11:23)
Modérateur
Concernant la nécessité, il faut se poser la question, mais c'est à toi d'y répondre (je ne juge pas sans connaitre précisément le projet, je ne suis pas fan des custom select, mais j'en utilise parfois, il faut rester pragmatique).

Des alternatives, il y en a d'autres:

1) Utiliser deux inputs number heure et minutes (min max et step sont bien supporté partout sur ces inputs)

2) Utiliser des inputs numbers toujours ou texte, mais pensé comme un composant custom, qui gère d'incrémenter 5:45 de 15 minutes passe à 6:00 avec un peu de js, les min/max et autres steps. C'est la Rolls-Royce, ça demande un peu de travail mais c'est moins problématique qu'un custom select pour l'accessibilité. tu peux même rajouter des boutons d'incrément customs agréables sur mobile, par exemple:
upload/1563530447-32231-capturedaeacran2019-07-19aa11.png

à jauger selon tes capacités, le temps disponible à investir, la plage de temps, l'incrément, l'importance du mobile, toussa toussa.
Oui effectivement, en passant par des input number, j'ai vite zappé cette idée car je trouve ça un peu chiant et lourd à customiser (de mon point de vue), que ce soit en css ou en js. Et surtout chiant à dynamiser (peut-être) pour le développeur, le produit final étant une app en marque blanche, chaque client aura des tranches horaires différentes et donc des incrémentations différentes, même si j'entends bien que les min/max/steps sont des valeurs qui pourront être dynamiques.

Je suis passé par un custom select avec une bonne vieille liste et un input hidden qui prend la valeur de la sélection, cela fonctionne très bien et je pense que ce sera plus simple pour tout le monde.

Merci pour tes précieux conseils en tous les cas.

upload/1563617126-46467-capture.jpg
Modifié par Pedrothelion (20 Jul 2019 - 12:05)
Sujet clos
Aller à