In IE6 after showing() or toggling() an initially hidden text input field it is impossible to enter any text in the box. It is also impossible to focus() on the element.
I am using jquery 1.3.2
Here is the code... Any ideas?
$(document).ready(function(){
$(".hide").click(function(){
$(".form").toggle();
})
})
and HTML
<form>
<div class="hide">
Show
</div>
<div class="form" style="display:none">
<input type="text" name="crap">
</div>
</form>
Ordinarily this works fine. Do you have any css which might be causing another element to "cover" the text input?
Oftentimes an overlapping div or some other item can prevent you from clicking without knowing why.
Particularly if your page is being rendered in Quirks Mode in IE6, out-of-place elements can be a major problem and hard to find. Make sure your code and css both validate with the W3C Validator.
Works for me in IE6: See http://jsbin.com/uzoni (http://jsbin.com/uzoni/edit to edit):
Complete test case:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
</head>
<body>
<form>
<div class="hide">Show</div>
<div class="form" style="display:none">
<input type="text" name="crap" />
</div>
</form>
<script type="text/javascript">
$(document).ready(function(){
$(".hide").click(function(){
$(".form").toggle();
if($(".form").is(":visible")) {
$(".form input")[0].focus()
}
})
})
</script>
</body>
</html>
After the input is shown, I can focus() and type into the box fine.
Sorry guys this seems to have been caused by a bad install of MultipleIEs on my machine. It seems to be working fine on the machine with just IE6 installed.