Question

我想知道如何将隐藏的box div放入当前焦点的输入文本中？

        <input type="text" class="target" name="some_name">
        <input type="text" class="target" name="other_name">
        <input type="text" class="target" name="another_name">
        <input type="text" class="target" name="some_other_name">

        other HTML ....


        <div id="hidden">This div is hidden somewhere in the page, 
    and only visible if any of the above input text is in focus. 
    Once another input is in focus, this box is moved 
relatively positioned (next, top or bottom) to the focus input. 
    This should be hidden if no input is in focus.</div>

我注意到一个插件：http://benalman.com/projects/jquery-outside-events-plugin/ 但不知道这是否是我所需要的。

非常感谢任何提示或方向。感谢

Answer 1

...将隐藏的box div放入输入文本...

input个元素不能包含子元素，因此您无法在DOM意义上将放在中。你可以把它放在输入的顶部，例如：

$("input").focus(function() {
    var pos = $(this).offset();
    $("#hidden")
        .data("showing-for", this.name)
        .css({
            position: "absolute",
            left:     pos.left + "px",
            top:      pos.top + "px"
        })
        .show();
}).blur(function() {
    var hidden = $("#hidden");
    if (hidden.data("showing-for") === this.name) {
        hidden.hide();
    }
});

Live copy

我们正在使用offset来获取焦点输入的位置，然后将“隐藏的”div放在它上面并显示它;在blur我们再次隐藏它。我们使用data来记住div显示的输入，因此我们只有在看到正确的blur（只是防御性）时才隐藏它。

（请注意，我假设id上的div值为"hidden"，而不是HTML示例中的"#hidden"。您不会写#属性中的哈希标记（id），这只是跟随的CSS指示符，是选择器中的id。）

使用jquery将隐藏框放入焦点输入中

1 个答案: