在html表单焦点和模糊上显示/隐藏div？答案

【问题标题】：show/hide div on html form focus and blur?在html表单焦点和模糊上显示/隐藏div？
【发布时间】：2013-02-03 13:11:49
【问题描述】：

当用户点击 html 表单输入“文本”（焦点）然后隐藏模糊时，我试图显示一个 div。

它可以工作，但由于某种原因，在用户点击文本输入字段之前，div 就显示出来了。我试图让它只在用户专注于文本字段时显示，并在他们点击它时隐藏？

谁能告诉我哪里出错了？谢谢

<script>
    $(".infobox-profile").hide();

    $("#text").focusin(function() {
        $(".infobox-profile").show();
    }).focusout(function () {
        $(".infobox-profile").hide();
    });
    </script>

    <div class="infobox-profile">hello</div>

【问题讨论】：

标签： javascript

【解决方案1】：

将您的代码放入$(function() { ... }

<script>
$(function() {
    $(".infobox-profile").hide();

    $("#text").focusin(function() {
        $(".infobox-profile").show();
    }).focusout(function () {
        $(".infobox-profile").hide();
    });
});
</script>

您的 JavaScript 可能在 infobox-profile 成为 DOM 的一部分之前执行。

工作示例

http://jsfiddle.net/bikeshedder/KxMcy/

【讨论】：

【解决方案2】：

就个人而言，我不会在使用 JS 加载时隐藏它，你可以在你的 css 中将display: none; 属性添加到.infobox-profile。就像bikeshedder说的。将您的代码放入$(function(){ INHERE });

【讨论】：