Question

We have a layer that appears when a certain text input has the focus and that should disappear when the input loses the focus. I tried to do it like this:

<input type="text" onblur="document.getElementById('hideme').style.display='none'" />
<div id="hideme">Textextext <a href="http://disney.com/">disney</a> text</div>

My problem is: when the user clicks on the link link, the browser does not follow this link. It seems the layer disappears before the browser checks where the click goes. What can I do here?

One idea would be to watch whether the mouse enters the hideme div and not to close it when the mouse cursor is in there, but this seems way to complicated. Do you have a better idea?

By the way: you can try it out very easy by pasting this into the Tryit Editor of w3schools. 🙂

Answer 1

First solution that comes to mind is using setTimeout function:

<input type="text" onblur="setTimeout('document.getElementById(\'hideme\').style.display=\'none\'', 100)" />

---

Without freaking slashes:

function hidemeWithDelay() {
    setTimeout("document.getElementById('hideme').style.display='none'", 100);
}  

<input type="text" onblur="javascript:hidemeWithDelay();" />