jQuery dynamic input field focus

Question

I want to add an input field dynamically to my page using the following jQuery:

var inputNode = "<input id='inputNode' class='tiContent' type='text'
    placeholder='text input...'/>";
$("div").append(inputNode);

and after doing so, I want the input field to have focus with blinking text cursor, so I want to type in it right after creation.

Could someone please tell me how can I do this?

I've tried calling

$(inputNode).focus()

and also have tried

$(inputNode).trigger('click')

but none of them worked. I can type into the field after clicking in it, but as I've said I want to type without any interaction immediately.

Answer 1

When you tried $(inputNode).focus(), jQuery was simply building a new disconnected (from the DOM) <input> element which was different to the one you had appended - although this disconnected one was focussed :-)

There are a couple of ways to focus the input.

If you can use HTML5 then adding the autofocus attribute will focus the input

var inputNode = '<input autofocus id="inputNode" class="tiContent" type="text" placeholder="text input..."/>';
$('div').append(inputNode);

Or, using jQuery, you need to find the <input> after the element has been created to call .focus() on it, as the inputNode in your code is simply a string and not a jQuery object.

var inputNode = '<input id="inputNode" class="tiContent" type="text" placeholder="text input..."/>';
$('div').append(inputNode);
$('div input').focus(); // or $('#inputNode').focus();

Answer 2

inputNode isn't a jQuery element, it's a string.

You probably mean:

$('#inputNode').focus()

as opposed to:

$(inputNode).focus()

The browser won't grumble at this since you've got a variable with that name

Answer 3

You need something like this:

 $('<input />').appendTo('div').get(0).focus();

The focus method is a method of the DOM element not the jQuery object hence the need for a call to 'get'.

You might like to read up on the appendTo and get methods in the jQuery docs

Hope this helps

Answer 4

<input type="button" value="click me" id="btnCreateTxt" />
<div></div>

$(document).ready(function() {
    $('#btnCreateTxt').click(function() {        
        var inputNode = $("<input id='inputNode' class='tiContent' type='text' placeholder='text input...'/>");
        $("div").append(inputNode);
        inputNode.focus();    
    });
});

works good for me: http://jsfiddle.net/GqFap/9/

Answer 5

You can convert it into a jQuery object before appending it to the dom, that way you have a reference to it. Then just call .focus on the referenced object.

var $inputNode = $("<input id='inputNode' class='tiContent' type='text' placeholder='text input...'/>");
$('body').append($inputNode);​​​
​$inputNode.focus();​

Here's a fiddle.