accessKey et FireFox

**joebarteam88** · 28/04/2009, 15h57

Bonjour,
Je cherche comment setter dynamiquement un accessKey sur un champ input. De prime abord ça parait bateau mais mon code passe sous IE et pas sous FF eek .
Voici le ptit bout de code tout simple en question :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
<html>
<head>
<script>
function init(){
  document.getElementById("inputA").accessKey = "L";
}
</script>
</head>
<body onload="init();">
<form>
<input type="text" id="inputA" name="inputA" value=""/>
</form>
</body>
</html>

J'ai essayé de mettre un libellé à mon champ via la balise LABEL (avec attribut FOR) puis de mettre dynamiquement l'accessKey sur le LABEL. Dans ce cas ça fonctionne parfaitement. cligne Hélas dans ce cas la navigation clavier diffère entre IE et FF.
Voilà pourquoi je dois mettre l'accessKey sur le champ directement.
Quelqu'un aurait une idée svp ?
Par avance merci !

**SpaceFrog** · 29/04/2009, 09h11

Mouaip c'est en fait un faux bug ...
Sur les versions antérieures les raccourcis étaut accessibles avec la combinaison de touches Alt + accesKey.

A priori pour éviter des conflits avec les touches de raccourcis de l'OS sous Firefox 2.0 ils ont modifié cette combinaison à Alt + Shift + accessKey.

Attention toutefois il semblerait que l'implémentation ne soit pas une réussite sous FFX 2.0 car on ne peut pas mettre d'accessKeys numériques ...

On peut annuler cette nouveauté de FFX 2 en modifiant le about:config de FFX. Dans le filtre de about:config recherchez ui.key.generalAccessKey et modifiez sa valeur à 18.
Cette opération ne peut être faite que manuellement par l'utilisateur

**joebarteam88** · 29/04/2009, 09h51

Merci SpaceFrog mais le problème n'est pas de savoir quelle combinaison de touche utiliser, je connaissais déjà le "cas" du ui.key.generalAccessKey à 18.

Le problème vient du fait que sur un champ input, j'arrive à définir dynamiquement l'accessKey (on le voit dans le DOM avec FireBug) seulement le nouveau raccourci semble ne pas être pris en compte avec FireFox 2 et 3.

**SpaceFrog** · 29/04/2009, 10h48

Il semblerait que le faire de remplacer l'input fonctionne ...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<html>
<head>
<script>
function init(){
  var NewInput=document.getElementById("inputA").cloneNode(true);
  NewInput.setAttribute('accessKey','L');
  NewInput.value='bar'
  document.getElementById("inputA").parentNode.removeChild(document.getElementById("inputA"));  
  document.body.appendChild(NewInput)
  document.body.focus()
 
}
</script>
</head>
<body onload="init();">
<form>
<input type="text" id="inputA" name="inputA" value="foo" />
</form>
</body>
</html>

**joebarteam88** · 29/04/2009, 11h11

Effectivement SpaceFrog, c'est ce que j'ai trouvé aussi.
Mais hélas je ne peux appliquer cette solution dans mon contexte.

**SpaceFrog** · 29/04/2009, 12h20

plus simplement en le réappendans au body après avoir defini le accessKey:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<html>
<head>
<script>
function init(){
  NewInput=document.getElementById("inputA")
  NewInput.accessKey='L'
  document.body.appendChild(NewInput)
  document.body.focus()
 
}
</script>
</head>
<body onload="init();">
<form>
<input type="text" id="inputA" name="inputA" value="foo" />
</form>
</body>
</html>

**joebarteam88** · 04/05/2009, 11h45

BINGO !!!
Bien joué

SpaceFrog, je n'avais pas pensé à cette solution !
Encore merci pour ton aide.

**Fladnag** · 26/08/2009, 13h59

Bonjour,

j'ai constaté le même problème.

Il semblerait que le champ accesskey ne soit pas lu de manière dynamique par Firefox une fois qu'il a fini de charger la page. Autrement dit, il n'est pas possible de le modifier une fois que la page est chargée.
Si tu fait la même chose en appelant ton script JS juste avant la fin de la page au lieu de l'appeller dans le onload, ca fonctionne...

Pour info, ci dessous, un exemple de ce qui marche et qui ne marche pas :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<html>
<head>
<script>
    function load(id) {
        var aInput=document.getElementById(id);
        aInput.setAttribute('accessKey', aInput.getAttribute("title"));
        aInput.style.backgroundColor="lightblue";
    }
 
    setTimeout("load('setTimeout');", 2000);
</script>
</head>
<body onload="load('onload')">
 
    <input type="text" value="1 by JS onload" id="onload" title="1" />
    <input type="text" value="2 by JS setTimeout" id="setTimeout" title="2"/>
    <input type="text" value="3 by JS endBody" id="endBody" title="3"/>
    <input type="text" value="4 natif" accesskey="4" title="4"/>
 
    <script>
    load("endBody");
    </script>
</body>
</html>

Selon mes tests :
IE6 [ALT+key] : les 4 accesskey fonctionnent
IE7 [ALT+SHIFT+key] : les 4 accesskey fonctionnent
FF3.5 [ALT+SHIFT+key] : seuls les accesskey 3 et 4 fonctionnent
Opera 9.63 [SHIFT+ESC+key] : les 4 accesskey fonctionnent

C'est donc bien un "bug" de firefox.

Tres joli contournement SpaceFrog, ca oblige FF a réanalyser l'arbre DOM.

Pour rendre la solution générique, et la faire fonctionner partout il faut en effet remplacer la fonction JS au dessus par celle ci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
    function load(id) {
        var aInput=document.getElementById(id);
 
        var aNext=aInput.nextSibling;
        var aParent = aInput.parentNode;
        aParent.removeChild(aInput);
        aParent.insertBefore(aInput,aNext);
 
        aInput.setAttribute('accessKey', aInput.getAttribute("title"));
        aInput.style.backgroundColor="lightblue";
    }

accessKey et FireFox

JavaScript

Discussions similaires

Partager

Partager