Focus sur checkbox n'"encadre" pas cette checkbox

Version imprimable

Bonjour à tous,

Sur cette page:
http://ditch.developpez.com/temp/test.html

dont voici le contenu:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 <html> <head> <script type="text/javascript"> function getfocus() {document.getElementById('myAnchor').focus()} function getfocus2() {document.forms[0].myAnchor.focus();} function losefocus() {document.getElementById('myAnchor').blur()} </script> </head> <body> <input type="checkbox" id="myAnchor">Text</input> <br /><br/> <input type="button" onclick="getfocus()" value="Get focus"> <input type="button" onclick="losefocus()" value="Lose focus"> </body> </html>
Lorsque l'on fait un "tab" dans la page, le checkbox est entouré d'un cadre et l'on voit de suite que c'est lui qui a le focus. Par contre, sous IE, le .focus donne effectivement le focus au checkbox... Par contre, le cadre n'est pas présent.

Est-ce que quelqu'un sait comment je peux avoir ce fameux cadre apparent?

D'avance merci ;)

Didier

02/06/2006, 14h48
SpaceFrog

cela provient je pense de ta syntaxe du input ...

input est une balise autofermante ... si tu veux lier du text à un check utilise un label ...

pas très beau mais efficace:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<html>
<head>
 
<script type="text/javascript">
function getfocus()
{document.getElementById('myAnchor').focus()}
 
function getfocus2()
{document.forms[0].myAnchor.focus();}
 
function losefocus()
{document.getElementById('myAnchor').blur()}
</script>
</head>
 
<body>
<label for='myAnchor'><input type="checkbox" id="myAnchor" />text</label>
<br /><br/>
<input type="button" onclick="getfocus()" value="Get focus">
<input type="button" onclick="losefocus()" value="Lose focus">
</body>
 
</html>

02/06/2006, 15h28
Ditch

Désolé pour le "Text" c'est une connaissance qui m'a filé ca mais j'ai focalisé sur le focus :?

Par contre je vois pas la différence, j'ai toujours pas le cadre :(
02/06/2006, 15h33
SpaceFrog

ha .
je l'ai moi le cadre en pointillé quand il a le focus ...
tu as bioen mis la balise ouvrant du label avant l'input ?
c'est pour ça que je dis que ce n'est pas beau ...

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 type="text/javascript">
 
function getfocus()
{document.getElementById('myAnchor').focus();
document.getElementsByTagName('div')[0].style.border="dotted 1px black"}
 
 
function losefocus()
{document.getElementById('myAnchor').blur();
document.getElementsByTagName('div')[0].style.border=""}
</script>
</head>
 
<body>
<div style="width:100px;" ><input type="checkbox" id="myAnchor" />text</div>
<br /><br/>
<input type="button" onclick="getfocus()" value="Get focus">
<input type="button" onclick="losefocus()" value="Lose focus">
</body>
 
</html>

02/06/2006, 16h07
SpaceFrog

après faut jouer avec les borders pour éviter le décallage ...

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<html>
<head>
<script type="text/javascript">
 
function getfocus()
{document.getElementById('myAnchor').focus();
document.getElementById('mydiv').style.border="dotted 1px black"}
 
 
function losefocus()
{document.getElementById('myAnchor').blur();
document.getElementById('mydiv').style.border="dotted 1px white"}
</script>
</head>
 
<body>
<div id="mydiv" style="width:100px;overflow:hidden;border:solid 1px white;" ><input type="checkbox" id="myAnchor" />text</div>
<br /><br/>
<input type="button" onclick="getfocus()" value="Get focus">
<input type="button" onclick="losefocus()" value="Lose focus">
</body>
 
</html>

02/06/2006, 16h17
Ditch

:merci:

je vais me baser là dessus pour avoir le traitement qui est exactement attendu :)