- Oct 9, 2002
- 28,298
- 1,235
- 136
I have nested DIVs with visible borders. Generally, a DIV will contain one object (text box, check box, or yes/no radio button), so I want to improve accessibility by making it so the user only has to click within the DIV to give focus to the object. I know of two ways to give focus to an object within the DIV:
1: <label for="whatever">, wrapped around the DIV
2: <div onclick="document.getElementById('whatever').focus()">
Method 1 works fine in Internet Explorer, but Google Chrome does something strange. Clicking in the DIV area gives focus to the text box, but clicking directly in the text box won't select it!
Anyway, I want the outer DIV to contain a yes/no check box that controls whether-or-not the inner DIVs appear. I can't use the <label> tag to give focus to the first check box, because that will also make a selection. I have to use onclick and .focus().
However, that method gets even more messed-up because onclick for an inner DIV still triggers the onclick for the outer DIV.
Is there a more elegant way to do this?
Thanks!
1: <label for="whatever">, wrapped around the DIV
2: <div onclick="document.getElementById('whatever').focus()">
HTML:
<html>
<head>
<title>Demonstrate Focus Problem with Nested DIVs</title>
<style type="text/css">
body{font-family:"Arial";}
div{border:2px solid #a1a1a1;}
div.main{
padding:20px 20px;
width:550px;
border-radius:25px;
-moz-border-radius:25px; /* Firefox 3.6 and earlier */
}
div.d-outer{
padding:15px 15px;
background:#dddddd;
width:520px;
border-radius:25px;
-moz-border-radius:25px; /* Firefox 3.6 and earlier */
}
div.d-inner{
border:1px solid #a1a1a1;
padding:15px 15px;
background:#dddddd;
width:490px;
border-radius:25px;
-moz-border-radius:25px; /* Firefox 3.6 and earlier */
}
</style>
</head>
<body>
<label for="firstthing">
<label for="firstthing">
<div id="firstdiv" class="d-outer">
Thing one:<br>
<input id="firstthing" name="firstthing"> *<br>
</div>
</label>
<br>
<label for="secondthing">
<div id="seconddiv" class="d-outer">
Thing two:<br>
<input id="secondthing" name="secondthing"> *<br>
</div>
</label>
<br>
<label for="thirdthing">
<div id="thirddiv" class="d-outer">
Thing three:<br>
<input id="thirdthing" name="thirdthing"> *<br>
<br>
<label for="fourththing">
<div id="firstinnderdiv" class="d-inner">
Thing four:<br>
<input id="fourththing" name="fourththing"> *<br>
</div>
</label>
<br>
<label for="fifththing">
<div id="secondinnerdiv" class="d-inner">
Thing five:<br>
<input id="fifththing" name="fifththing"> *<br>
</div>
</label>
</div>
</label>
</label>
</body>
</html>Method 1 works fine in Internet Explorer, but Google Chrome does something strange. Clicking in the DIV area gives focus to the text box, but clicking directly in the text box won't select it!
Anyway, I want the outer DIV to contain a yes/no check box that controls whether-or-not the inner DIVs appear. I can't use the <label> tag to give focus to the first check box, because that will also make a selection. I have to use onclick and .focus().
However, that method gets even more messed-up because onclick for an inner DIV still triggers the onclick for the outer DIV.
Is there a more elegant way to do this?
Thanks!
Facebook
Twitter