Bien informer l'utilisateur d'un raccourci clavier

Bonjour,

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 :

1

<button type="button" id="mybtn" accesskey="e">Edit</button>

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 ?

Tu peux utiliser l’attribut :hover et faire un truc plus ou moins propre du genre : https://openclassrooms.com/courses/modifier-l-apparence-d-une-infobulle

Je pense que avec :hover et les peusdo-élèment il doit y avoir moyen de bidouiller un truc uniquement en html et css.

Je me suis peut-être mal exprimé

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 risque d’être compliqué, l’application que je développe repose intensément sur JavaScript

Merci pour ton lien, je vais regarder ça

Je me permets de revenir pour proposer le code que j’ai écrit hier, histoire que cela puisse aider d’autres personnes :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

'use strict';

function Platform() {}

Platform.isBrowser = function(browserName) {
  return (navigator.userAgent.indexOf(browserName) != -1);
};

Platform.isOS = function(osName) {
  var currentOS = "unknown";
  switch(navigator.platform) {
    case "Win32": currentOS = "Windows"; break;
    case "Linux": case "X11": currentOS = "Linux"; break;
    case "MacIntel": currentOS = "macOS"; break;
  }

  return currentOS === osName;
};

Platform.getHotKeyFromAccessKey = function(accessKey) {
  var hotKey = "";

  if(Platform.isOS("Windows") || Platform.isOS("Linux")) {
    if(Platform.isBrowser("Firefox"))
      hotKey = "Ctrl + Alt + ";
    else
      hotKey = "Alt + ";
  }
  else if (Platform.isOS("macOS")) {
    if(Platform.isBrowser("Opera"))
      hotKey = "⌥";
    else
      hotKey = "⌃⌥";
  }

  hotKey += accessKey.toUpperCase();

  return hotKey;
};

On déclare ainsi un prototype Platform qu’il est ensuite possible d’utiliser comme ceci :

1

var hotkey = Platform.getHotKeyFromAccessKey("e");

Voilà, c’est sûrement perfectible, donc n’hésitez pas si vous voyez des trucs améliorables