Focus clavier dans un div "position : fixed"

**jd_HotK** · 13/11/2011, 18h03

Bonjour,

j'ai commencé à faire un joli petit site Web dans lequel toutes les pages ont cette structure :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<body>
	<div id="divMenu">
		<div class="menu_horizontal">
			<!-- contenu du menu -->
		</div>
	</div>
	<div id="divInformations">
		<div class="informations_horizontal">
			<!-- contenu du menu -->
		</div>
	</div>
</body>

Les classes de style sont définies dans mon fichier style.css :

Code css :

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
29
30
31
32
33
34
35
36
37
38
39
40
41
 
.menu_horizontal, .menu_vertical {
	position : fixed;
	top : 0px;
	left : 0px;
	display : block;
	text-align : center;
	font-size : 160%;
	vertical-align : middle;
	background-repeat : no-repeat;
	background-attachment : fixed;
}
 
.informations_horizontal, .informations_vertical {
	padding-left : 0.5em;
	padding-right : 0.5em;
	right : 0px;
	position : fixed;
	bottom : 0px;
	height : auto;
	display : block;
	overflow : auto;
	background-image : url("images/fond_samourai.jpg");
	background-repeat : no-repeat;
	background-attachment : scroll;
}
 
.informations_horizontal {
	top : 128px;
	left : 0px;
	background-position : center top;
}
 
.menu_horizontal {
	background-image : url("images/kanji_horizontal_large_h_128_fond.jpg");
	background-position : center top;
}
 
.menu_horizontal, .tab_menu_horizontal {
	width : 100%;
}

(J'omets intentionnellement <html> et <head> : s'il est nécessaire de les préciser, dites-le moi et je les envoie.)

Ça me fait un chouette menu qui reste en haut de la page même quand je scrolle vers le bas, c'est très bien. Mais ... quand la page s'affiche, si le contenu de la zone principale (divInformations, donc) a une taille supérieure à la hauteur de la fenêtre de mon navigateur, je n'arrive pas à scroller avec les touches de flèches (haut, bas, page-up, page-down). Il faut que je commence par cliquer dans la zone principale et là, ça marche très bien.

Est-il possible de faire en sorte que le navigateur comprenne que les touches du clavier doivent s'appliquer directement à la zone principale ? J'ai essayé de la déclarer en premier dans le code HTML (puisque le placement est uniquement fonction du style), sans succès. J'ai aussi essayé de chercher "html css focus" sur le Web, mais apparemment j'utilise les mauvais mots-clefs parce que les solutions proposées par d'aimables internautes ne résolvent pas mon problème. (Non qu'elles le doivent, du reste. Ce sont des solutions pour un souci proche, mais pas le même que le mien.)

Par ailleurs, ces pages sont purement informatives et ne contiennent donc pas de balise <form>. J'ai essayé de créer un pseudo-formulaire qui ne contiendrait qu'un input hidden (avec l'attribut tabindex à "1"), mais sans succès. Pareil avec une balise <a> qui pointe vers la même page mais sans contenu, avec l'attribut tabindex à "1".

PS : j'ignore si je devrais poster ça dans le forum HTML ou CSS, mais comme il me semble que CSS ne gère pas trop le focus et que par ailleurs certaines solutions que j'ai vues et testées sans succès utilisaient Javascript, HTML me paraît plus général.

**NoSmoking** · 17/11/2011, 22h51

Bonsoir,
essaies en mettant ce code dans ta page

Code javascript :

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

1
2
3
4
5
<script type="text/javascript">
window.onload=function(){
  document.body.focus();
}
</script>

mais la réaction me semble bizarre !!!

**jd_HotK** · 19/11/2011, 01h14

Merci pour la réponse*!

Je viens tout juste d'essayer, sans résultat apparent. J'ai aussi essayé

Code javascript :

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

1
2
3
4
5
<script type="text/javascript">
window.onload=function(){
  document.getElementById("divInformations").focus();
}
</script>

Mais ça ne semble pas mieux marcher. (J'ai vérifié avec un window.alert() que getElementById trouvait bien le div dont l'id est "divInformations".)

Ma perplexité s'aggrave.

**NoSmoking** · 19/11/2011, 08h47

vu l'arbre en boule

il faut mettre le focus sur l'élément en position fixed

Code javascript :

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

1
2
3
window.onload=function(){
  document.getElementById('xx').focus();
}

avec

Code :

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

1
2
3
4
5
6
7
8
9
10
<div id="divMenu">
  <div class="menu_horizontal">
    <!-- contenu du menu -->
  </div>
</div>
<div id="divInformations">
  <div id="xx" class="informations_horizontal">
    <!-- contenu du menu -->
  </div>
</div>

**jd_HotK** · 21/11/2011, 00h02

Ça y est, ça marche*! Merci beaucoup.

(Question indiscrète, secondaire et digressive : c'est quoi, un arbre en boule ? Je sens venir le jeu de mots, sans le comprendre ...)

**NoSmoking** · 21/11/2011, 19h23

(Question indiscrète, secondaire et digressive : c'est quoi, un arbre en boule ? Je sens venir le jeu de mots, sans le comprendre ...)

il n'y a rien d'indiscret dans ta question, c'est une expression, souvenir qui remonte à mon enfance, et qui signifie si ceux ci sont bons, rien de plus que la recherche du repaire et objectif à la fois, par extension quand je cherche quelque chose de difficilement visible dans l'environnement et que je le trouve j'ai encore l'habitude de dire "vu l'arbre en boule."
Quant à l'origine réelle ??? peut être qu'une recherche sur la toile, mais bon j'aime bien cette expre-définition alors....

Focus clavier dans un div "position : fixed" [HTML 4.0]

HTML

Vue hybride

Discussions similaires

Partager

Partager