Rendre le focus a la fenetre

**Mercenary Developer** · 26/07/2007, 08h26

Bonjour,

J'ai une page web simple, avec une zone de saisie. Actuellement quand le focus n'est pas sur cette zone et que l'on tape sur une touche, elle s'affiche dans une boite d'alerte, et quand le focus est sur la zone de texte, les caracteres entrés au clavier s'affiche dedant. Ce qui me pose probleme, c'est que je voudrais, dans l'optique du gestion 100% au clavier, que quand l'utilisateur tape sur Esc alors que le focus est sur la zone de saisie, cette derniere perd le focus et la fenetre gagne ce focus pour qu'ensuite, lors de saisie clavier, ce soient les messages d'alertes qui apparaissent. Actuellement il faut taper plusieurs fois sur Tab pour enlever le focus de la zone de saisie et le mettre sur la fenetre. J'ai remarqué que pour certaine touche, dont Esc,

Code :

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

var touche=(window.Event)?e.which:e.keyCode;

renvoi 0, j'ai donc essayé de faire

Code :

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

1
2
if( touche == 0 ) // Si on tape sur ESC
   window.focus(this);

mais sans succes.
Voici le code complet:

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
25
26
27
28
<html>
   <head>
      <title>Test focus</title>
      <script>
         var zoneTexte = false;
         function clavier(e)
         {
            var touche=(window.Event)?e.which:e.keyCode;
            if( !zoneTexte )
            {
               touche = String.fromCharCode(touche)
               alert( "touche="+touche );
            }
            else
            {
               window.status="code touche="+touche;
               if( touche == 0 ) // Si on tape sur ESC
                  window.focus(this);
            }
         }
      </script>
   </head>
   <body onkeypress="javascript:clavier(event)">
      <form action="#" method="GET">
         zone de texte: <input type="text" onFocus="javascript:zoneTexte=true" onBlur="javascript:zoneTexte=false">
      </form>
   </body>
</html>

Avez-vous une idée de comment faire ?

Cordialement.

**E.Bzz** · 26/07/2007, 08h59

Bonjour,
essaye avec

Code :

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

window.event.keyCode==27

A+

**Mercenary Developer** · 26/07/2007, 09h39

Re,

Quand je fais

Code :

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

window.status="code touche="+touche;

Il me met code touche = 0 quand j'appuie sur Esc dans la barre de status.
C'est ce qui me parait bizarre.

Mais window.focus(this); est bien appelé, mais n'a aucun effet.

Cordialement.

**E.Bzz** · 26/07/2007, 09h40

C'était juste pour te dire que le code de la touche ESC est 27 et non 0 ...
==>

Code :

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

 if (touche == 27 ) // Si on tape sur ESC

A+

**Mercenary Developer** · 26/07/2007, 09h50

Re,

En remplacant

Code :

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

<body onkeypress="javascript:clavier(event)">

par

Code :

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

<body onkeydown="javascript:clavier(event)">

J'obtient maintenant bien 27 quand j'appuie sur Esc, mais

Code :

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

window.focus();

N'a aucun effet, le focus reste sur ma zone de texte.

Cordialement.

**E.Bzz** · 26/07/2007, 09h55

Envoyé par Lovmy

N'a aucun effet, le focus reste sur ma zone de texte.

Le focus étant déjà sur la fenêtre (puisque l'input en fait partie), ça semble normal.
Donne le focus à un autre élément (non modifiable, par ex.) de ta fenêtre ...

A+

**Mercenary Developer** · 26/07/2007, 10h18

Re,

Ce bout de code:

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
25
26
27
<script>
         var zoneTexte = false;
         function clavier(e)
         {
            var touche=(window.Event)?e.which:e.keyCode;
            if( touche != 9 && !zoneTexte )
            {
               touche = String.fromCharCode(touche)
               switch(touche)
               {
                  case 'a':
                     alert( "touche A" );
                     break;
                  default:
                     alert( "["+touche+"]" );
                     break;
               }
            }
            else
            {
               if( touche == 27 )
                  window.focus();
            }
         }
      </script>
   </head>
   <body onkeydown="javascript:clavier(event)">

fonctionne sous IE mais pas sous FireFox. Le "if( touche != 9 &&" c'est pour eviter les boite d'alerte lors d'appuie sur la touche Tab.

Sur quel type d'element puis-je faire passer mon focus, j'ai essayer un <input type="hidden"> mais ca ne marche pas, mon focus ( sous Firefox ) reste desesperement sur ma zone de texte.

Cordialement.

**E.Bzz** · 26/07/2007, 10h23

Un input "hidden" étant ... caché, c'est normal.
Essaye avec un élément affiché ...

A+

**Mercenary Developer** · 26/07/2007, 10h43

Ca ne m'arrange pas trop, mon but étant justement qu'aucun élement visible n'ai le focus.

Cordialement.

**marcha** · 26/07/2007, 13h55

Salut,

Tu peux éventuellement styler cet élément pour que l'utilisateur ne puisse
le voir, mais sans le rendre invisible (techniquement parlant)

Tu peux le déplacer avec un position absolute avec un top négatif
ou le réduire à 1px * 1px avec un bordure de 1px de la même couleur de fond.

A tester.

Rendre le focus a la fenetre

JavaScript

Vue hybride

Discussions similaires

Partager

Partager