Bien informer l'utilisateur d'un raccourci clavier

L’auteur de ce sujet a trouvé une solution à son problème.
Auteur du sujet

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 ?

A graphical interface is like a joke: if you have to explain it, that’s shit.

+0 -0

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. :)

“Your manuscript is both good and original. But the part that is good is not original, and the part that is original is not good.” Samuel Johnson

+0 -0
Auteur du sujet

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. :)

Demandred

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 graphical interface is like a joke: if you have to explain it, that’s shit.

+0 -0

Cette réponse a aidé l’auteur du sujet

Je pose ça là :

http://stackoverflow.com/questions/9514179/how-to-find-the-operating-system-version-using-javascript

Mais de préférence, fait ça coté serveur. C’est à dire utilise l’User-agent pour afficher les bonnes informations.

Si t’as l’occasion de te passer de JS c’est mieux pour le coup je pense.

Édité par ache

ache.one                 🦹         👾                                🦊

+1 -0
Auteur du sujet

Je pose ça là :

http://stackoverflow.com/questions/9514179/how-to-find-the-operating-system-version-using-javascript

Mais de préférence, fait ça coté serveur. C’est à dire utilise l’User-agent pour afficher les bonnes informations.

Si t’as l’occasion de te passer de JS c’est mieux pour le coup je pense.

ache

Ça risque d’être compliqué, l’application que je développe repose intensément sur JavaScript ^^

Merci pour ton lien, je vais regarder ça :)

A graphical interface is like a joke: if you have to explain it, that’s shit.

+0 -0
Auteur du sujet

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 :)

A graphical interface is like a joke: if you have to explain it, that’s shit.

+0 -0
Vous devez être connecté pour pouvoir poster un message.
Connexion

Pas encore inscrit ?

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