Pour mon projet d’application Web, j’aimerais associer à un bouton de ma page un raccourci clavier pour faciliter son accès dont je sais qu’il sera relativement fréquent. Je me suis donc dirigé vers l’attribut HTML accesskey qui n’utilise pas une goûte de JavaScript. Voici le code HTML de mon bouton :
De facto, le bouton devient accessible avec le raccourci suivant, selon l’OS et le navigateur (selon W3School) :
Sous Windows et Linux :
IE, Chrome, Safari, Opera :Alt + E
Firefox :Alt + ⇧
Sous macOS :
Opera :⌥E
Tous les autres :⌃⌥E
J’aimerais maintenant ajouter un attribut title à mon bouton afin de l’agrémenter d’une infobulle pour signaler à l’utilisateur le raccourci clavier à utiliser, tout en s’adaptant au système et au navigateur, de telle sorte que le raccourci affiché dans l’infobulle soit celle que l’utilisateur peut réellement utiliser.
Je me doute qu’il faille du JavaScript pour faire cela, mais je ne trouve pas de moyen simple… Comment faire ?
A graphical interface is like a joke: if you have to explain it, that’s shit.
Ce que je cherche à faire, c’est afficher dans l’infobulle (défini par l’attribut title) le raccourci clavier correspondant en fonction du navigateur et de l’OS de l’utilisateur. Quelque chose me dit que je vais devoir me baser sur son User Agent, mais je me demandais s’il existait une méthode plus propre ?
A graphical interface is like a joke: if you have to explain it, that’s shit.
'use strict';functionPlatform(){}Platform.isBrowser=function(browserName){return(navigator.userAgent.indexOf(browserName)!=-1);};Platform.isOS=function(osName){varcurrentOS="unknown";switch(navigator.platform){case"Win32":currentOS="Windows";break;case"Linux":case"X11":currentOS="Linux";break;case"MacIntel":currentOS="macOS";break;}returncurrentOS===osName;};Platform.getHotKeyFromAccessKey=function(accessKey){varhotKey="";if(Platform.isOS("Windows")||Platform.isOS("Linux")){if(Platform.isBrowser("Firefox"))hotKey="Ctrl + Alt + ";elsehotKey="Alt + ";}elseif(Platform.isOS("macOS")){if(Platform.isBrowser("Opera"))hotKey="⌥";elsehotKey="⌃⌥";}hotKey+=accessKey.toUpperCase();returnhotKey;};
On déclare ainsi un prototype Platform qu’il est ensuite possible d’utiliser comme ceci :
1
varhotkey=Platform.getHotKeyFromAccessKey("e");
Voilà, c’est sûrement perfectible, donc n’hésitez pas si vous voyez des trucs améliorables
A graphical interface is like a joke: if you have to explain it, that’s shit.
+0
-0
Connectez-vous pour pouvoir poster un message.
Connexion
Pas encore membre ?
Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte