1

i'm sorta new to this. i have this so far:

<style type="text/css">
#show_hide{display:none;}
</style>

<div id="show_hide">
ok
</div>

<input type="text" onfocus="document.getElementById('show_hide').style.display='block';">

it works when i click the input box to show the div. prob is i need it to hide again when i click somewhere else or "unfocus" any help? thanks!

Mike
  • 11
  • 1
  • 1
  • 2

3 Answers3

3

So, your issue is that your CSS sets the default state of the div (to display:none), then your JavaScript changes the state onfocus to display: block--but you don't have any code to revert the div back to the hidden state.

With plain JavaScript I believe you'll want the onblur event (focus lost) to handle this:

<input type="text" 
    onfocus="document.getElementById('show_hide').style.display='block';"
    onblur="document.getElementById('show_hide').style.display='none';">

Here it is in action, with your sample

STW
  • 40,454
  • 16
  • 100
  • 153
1

have you tried leveraging onblur event http://javascript.gakaa.com/div-blur-4-0-5-.aspx

also this post might help How to blur the div element?

Community
  • 1
  • 1
Alex
  • 3,614
  • 2
  • 17
  • 27
0

The event handler you are looking for is called onBlur (http://www.w3schools.com/jsref/event_onblur.asp).

Marcel Korpel
  • 20,899
  • 5
  • 58
  • 79
GotDibbs
  • 2,490
  • 1
  • 17
  • 27