Focus sur checkbox n'"encadre" pas cette checkbox

**Ditch** · 02/06/2006, 14h44

Bonjour à tous,

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

dont voici le contenu:

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
<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

**SpaceFrog** · 02/06/2006, 14h48

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 ...

**SpaceFrog** · 02/06/2006, 14h51

pas très beau mais efficace:

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
<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>

**Ditch** · 02/06/2006, 15h28

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

**SpaceFrog** · 02/06/2006, 15h33

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 ...

**SpaceFrog** · 02/06/2006, 16h03

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 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>

**SpaceFrog** · 02/06/2006, 16h07

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

**SpaceFrog** · 02/06/2006, 16h08

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
<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>

**Ditch** · 02/06/2006, 16h17

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

Focus sur checkbox n'"encadre" pas cette checkbox

JavaScript

Partager

Partager