Simple question really. This works in all but IE6:
<html>
<body>
</body>
<select id="test" onchange="blur()">
<option name="one">One</option>
<option name="two">Two</option>
<option name="three">Three</option>
</select>
</html>
Is there anyway to get this working in IE6? JavaScript and JQuery hacks allowed.
Any ideas, remarks or tips? Thanks in advance
Under jQuery:
<script type="text/javascript">
$(function() {
$('#test').change(function() {
$(this).blur();
});
});
</script>
Or you may try replacing:
With:
<select id="test" onchange="javascript:blur(this);">
UPDATE: Actually it seems that the IE6 JavaScript engine has problems with blur()
A (non-ideal) work around is:
<script type="text/javascript">
$(function() {
$('#test').change(function() {
$('body').focus();
});
});
</script>
Which will lose focus on the select input field by focussing the HTML document.
What are you trying to do? If you're trying to make your drop-down lose focus after the user selects something from it, why do you want to do this?
Incidentally, if the user opens the drop-down but then selects the same option that was previously selected, you won't get a change event.
<select id="test" onchange="blur()">
You want to blur the select, not the window (which acts as the global object, so this is the same as window.blur()).
<select id="test" onchange="this.blur();">
Works in all but IE6 due to a bug. You could get around it by focusing something else:
<a href="#" id="x"></a>
<select id="test" onchange="var x= document.getElementById('x'); x.focus(); x.blur();">
BUT! Either way, don't do this. You'll break keyboard accessibility for the select (since pressing up/down immediately sends a change event). This is the same problem that faces drop-downs abused as navigation.