Question

I am wondering how to place a hidden box div into an input text that is currently in focus?

        <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>

I notice a plugin: http://benalman.com/projects/jquery-outside-events-plugin/
but no idea if that is what I need at all.

Any hint or direction is very much appreciated. Thanks

Answer 1

…place a hidden box div into an input text…

input elements cannot have child elements, so you can’t put it inside in the DOM sense. You could put it on top of the input, e.g.:

$("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

There we’re using offset to get the position of the focussed input and then positioning the “hidden” div on top of it and showing it; on blur we hide it again. We use data to remember which input the div is showing for so we only hide it when we see the correct blur (just being defensive).

(Note that I’ve assumed the id value on the div will be "hidden", not "#hidden" as in your HTML example. You don’t write the hash mark (#) in the id attribute, that’s just the CSS indicator that what follows is an id in a selector.)