TabIndex control in a non compliant html page
I have an html page where I cannot put a DOCTYPE (I am not allowed to). Plus, I need to make it work on IE 8! Then there is a checkbox + label thing. For example, this:
<input id="daffodils" type="checkbox" title="daffodil factsheet" name="daffodils" value="checkbox" tabindex=2>
<label for="daffodils">Daffodils</label>
<input id="tulips" type="checkbox" title="tulip factsheet" name="tulips" value="checkbox" tabindex=3>
<label for="tulips">Tulips</label>
My problem: I want to get the checkbox highlighted when I Tab around, but with this code, only the Labels get highlighted. I tried using TabIndex. but it didn't help. Of course, the checkbox can be checked/unchecked, but I wanted the checkbox to be highli开发者_JS百科ghted. (By highlighted - I mean ..the dotted square around an object)
Thanks.
This is not pretty, but it might work for you:
<html>
<head>
<title>Whatever</title>
<script type="text/javascript">
function focusThis(This) {
This.className='focus';
}
function blurThis(This) {
This.className='blur';
}
</script>
<style type="text/css">
.focus {
border: 1px dotted black;
}
.blur {
border: 1px solid white;
}
</style>
</head>
<body>
<input id="daffodils" onfocus="focusThis(this);" onblur="blurThis(this);" type="checkbox" title="daffodil factsheet" name="daffodils" value="checkbox" tabindex=2>
<label for="daffodils">Daffodils</label>
<input id="tulips" onfocus="focusThis(this);" onblur="blurThis(this);" type="checkbox" title="tulip factsheet" name="tulips" value="checkbox" tabindex=3>
<label for="tulips">Tulips</label>
</body>
</html>
Notice the onfocus and onblur events on the input boxes.
Edit:
If you're open to using the jQuery library, you can easily get away from the onfocus and onblur events inside the input tags by just adding and removing the focus class:
<html>
<head>
<title>Whatever</title>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('input').focus(function(){
$(this).addClass('focus');
}).blur(function(){
$(this).removeClass('focus');
});
});
</script>
<style type="text/css">
.focus {
border: 1px dotted black;
}
</style>
</head>
<body>
<input id="daffodils" type="checkbox" title="daffodil factsheet" name="daffodils" value="checkbox" tabindex=2>
<label for="daffodils">Daffodils</label>
<input id="tulips" type="checkbox" title="tulip factsheet" name="tulips" value="checkbox" tabindex=3>
<label for="tulips">Tulips</label>
</body>
</html>
I'm sure someone could write the JS code to do the same, but I prefer jQuery.
Is it allowed not to use <label>?
<div style="cursor:default;" onclick="this.childNodes[0].focus();this.childNodes[0].click();"><input id="daffodils" type="checkbox" title="daffodil factsheet" name="daffodils" value="checkbox" tabindex=2><span>Daffodils</span></div>
<div style="cursor:default;" onclick="this.childNodes[0].focus();this.childNodes[0].click();"><input id="tulips" type="checkbox" title="tulip factsheet" name="tulips" value="checkbox" tabindex=3><span for="tulips">Tulips</span></div>
That will be fine.
for every checkbox, suurround them in
<div style="cursor:default;" onclick="this.childNodes[0].focus();this.childNodes[0].click();"><input /><span /></div>
And that's all done.
加载中,请稍侯......
精彩评论