Question

After appending input box to other element, it would not let to click in the box (the focus goes away instantly). Why would this happen? Here is JSFIDDLE

HTML

<div id="placeHolder" onclick="appendSearch()">placeHolder</div>
<input id='box' type='text'></input>

JS

function appendSearch(){
    $("#box").appendTo($("#placeHolder"))
}
Was it helpful?

Solution 2

The appendTo method is what is causing the input to lose focus, as the input is now in the div, and it is calling the function on click. The following code will account for that.

function appendSearch(){
    if ($("#placeHolder input").length == 0) {
        $("#box").appendTo($("#placeHolder"));
    }
}

OTHER TIPS

If you want to put focus directly in your text box use .focus() :

$("#box").appendTo($("#placeHolder")).focus();

I updated your jsFiddle

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top