récupération id d'un input type range sur mobile

Hello :)

Alors en gros certains nevigateurs mobile ne déclenchent pas les events de la même manière que sur desktop

Faudrait faire un event spécifique pour mobile

let activeElement

activeElement = $(document.activeElement).attr('id') || document.body;

element.ontouchstart(e => activeElement = e.target)
element.ontouchend(e => activeElement = document.body)

// Si ca doit rester
let activeElement

activeElement = $(document.activeElement).attr('id') || document.body;

element.onclick(e => activeElement = e.target)

@popotte :
Merci pour ton aide.
lorsque j'essaie d'appliquer ton code, la console me renvoie le message d'erreur suivant : 'Unable to preventDefault inside passive event listener due to target being treated as passive.'

Je t'avoue que tt ça se complexifie et que tt cela commmence à dépasser mes compétences en JS......

Avec plaisir ^^

Bizarre :/

Tu as un event.preventDefault() quelque part dans ton code? En gros les navigateurs mobiles interdisent le preventDefault et... C'est idiot :|

tu peux faire un truc comme ça:

element.addEventListener('touchstart', e => activeElement = e.target, {passive:false})
element.addEventListener('touchend', e => activeElement = document.body, {passive:false})

element.addEventListener('click', e => activeElement = document.body, {passive:false})

Comme ça tu force le navigateur à ne plus passer en passive, après parrait que ça peut provoquer des bugs de scroll, alors faut tester pour voir si ça fonctionne, ou alors au niveau de l'erreur tu utilises le debug de ton navigateur pour trouver où se déclenche l'erreur dans le code, c'est même mieux x)

Apparemment pas mieux.... voilà ce que me dit la console :
[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/feature/5093566007214080
preventDefault @ jquery.min.js?ver=3.6.1:2
i.move @ custom.unified.js?ver=4.9.4:65
dispatch @ jquery.min.js?ver=3.6.1:2
y.handle @ jquery.min.js?ver=3.6.1:2

Mmmh alors j'ai un peu cherché et jQuery passe le passive en false par défaut, du coup l'option que j'ai ajouté ne change rien, essyes avec le passive à true au lieux de false, au lieux de forcer l'event, autant essayer de faire ce que chrome demande

Après un autre problème, jQuery ne fonctionne pas avec Chrome, il n'a pas de support passive, le support sera ajouté dans jQuery 4

Si vraiment tu veux utiliser jQuery, tu peux ajouter ce setup juste après avoir importé jQuery (en cdn ou import):

jQuery.event.special.touchstart = {
    setup: function( _, ns, handle ) {
        this.addEventListener("touchstart", handle, { passive: !ns.includes("noPreventDefault") });
    }
};
jQuery.event.special.touchmove = {
    setup: function( _, ns, handle ) {
        this.addEventListener("touchmove", handle, { passive: !ns.includes("noPreventDefault") });
    }
};
jQuery.event.special.wheel = {
    setup: function( _, ns, handle ){
        this.addEventListener("wheel", handle, { passive: true });
    }
};
jQuery.event.special.mousewheel = {
    setup: function( _, ns, handle ){
        this.addEventListener("mousewheel", handle, { passive: true });
    }
};

Et ensuite tes events devraient pouvoir passer en passive (retires le paramettre {passive: false} y'en aura plu besoin)

Alors, je travaille sur WordPress, et j'imagine que le réglage du preventDefault provient de l'un des plugins installés.
Je ne souhaite pas à proprement parler utiliser jQuery plus que du simple JS.
Initialement mon problème est juste un inpit type range pour lequel je souhaite détecter le focus, un id lorsqu'il est 'active', etc ... bref, n'importe quoi qui me permette de détecter qu'il est l'élément en cours d'utilisation....
et bien sûr que ça fonctionne sur mobile (parce que la récupération de l'id en tant qu'élément actif fonctionne très bien sur desktop).
Ce qui est étrange, c'est que sur mobile le js ne semble pas 'voir' l'élément input type Range (si je fais un console.log sur activeElement)...
Dans tous les cas, merci d'avoir investi du temps pour moi 🙏

Ah oui Wordpress ça peut poser problème si un plugin utilise jQuery, et même si demain jQuery v4 sortait, baah le plugin utilise jQuery 3 donc bon... Tu peux fouiller dans le code de tes plugin pour voir si il y a un event.preventDefault dans un des plugins, ou virer le plugin pour en trouver un autre mieux, eeeet y a pas vraiment d'autres solutions, c'est pour ça que perso je propose que du sur-mesure en Laravel ou NextJS ^^'

Après tu peux aussi aller dans la base de ton projet wordpress, importer jQuery toi même puis mettre le paté de code à la suite, comme ça c'est configuré pour passer en passive, résultat pas garanti ^^'

Sinon je dis ça au cas où mais si tu veux juste appliquer un style aux input, alors oublies le JS, utilises le CSS :p

.elements:active {
    /* Ton changement css ici */
}

Pas de soucis ^^