最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - how to show and hide a div using onfocus - Stack Overflow

programmeradmin5浏览0评论

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!

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!

Share asked Aug 27, 2010 at 17:06 MikeMike 111 gold badge1 silver badge2 bronze badges
Add a ment  | 

3 Answers 3

Reset to default 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

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

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

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

发布评论

评论列表(0)

  1. 暂无评论