accessKey et FireFox

Version imprimable

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:

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 !

29/04/2009, 09h11
SpaceFrog

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 :(
29/04/2009, 09h51
joebarteam88

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.

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

Code:

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>

29/04/2009, 11h11
joebarteam88

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

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

Code:

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>

04/05/2009, 11h45
joebarteam88

BINGO !!!
Bien joué :king: SpaceFrog, je n'avais pas pensé à cette solution !
Encore merci pour ton aide.

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:

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:

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"; }