如何使用onfocus显示和隐藏div

Question

我对此并不熟悉。到目前为止我有这个：

<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';">

当我单击输入框以显示div时，它可以工作。问题是我需要它再次隐藏当我点击其他地方或“不重点”任何帮助？谢谢！

Answer 1

所以，你的问题是你的CSS设置了div的默认状态（到display:none），然后你的JavaScript将onfocus的状态改为display: block - 但是你没有任何代码将div恢复为隐藏状态。

使用纯JavaScript我相信你会希望onblur事件（焦点丢失）来处理这个问题：

<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

Answer 2

您是否尝试过利用onblur事件http://javascript.gakaa.com/div-blur-4-0-5-.aspx

这篇文章也可以帮助How to blur the div element?

Answer 3

您正在寻找的事件处理程序名为onBlur（http://www.w3schools.com/jsref/event_onblur.asp）。