javascript - 如何使用 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