jQuery focus / blur

JavaScript
1

I have an input text field that when clicked, I want a div to apprear and then when you click off of the input field, I want to hide the div. The trick is, If you click on the input field and then click on the div, I don’t want to hide it.

This only works in FF, but not IE and I need to it to be cross-browser compatible.


$('#div').hide();

$('#input_textfield').focus(function() {
	$('#div').fadeIn('slow');
}).blur(function() {
	$('#div').fadeOut('slow');
});
2

try adding a click event to the #div:
$(‘#input_textfield’).focus(function() {
$(‘#div’).fadeIn(‘slow’);
}).blur(function() {
$(‘#div’).fadeOut(‘slow’);
$(‘#div’).click(function(){
$(‘#div’).show();
});
});

3

Any jQuery experts know how to do this?

4

Really, any advice on how I should go about this is appreciated. I’ve tried to wrap my head around it and haven’t been able to get it to work properly yet. Thanks!

5

Put the blur function call in a timeout and cancel it if the div is clicked or moused over etc.