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.

Guaco

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();

Subequatorial

Many thanks! This is the 3rd correct way to do it, you were really helpful, all of you! – Guaco

This one does not work for me because when $('div input').focus(); is run, the element seems not to exist. – Broker

Autofocus only works for the first textbox, and focus works all the time for me. – Peroxidize

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

Diabolic

Hi there! Many thanks, it works. I thought that the surrounding it by $() will cast it to a jQuery object. (I'm pretty new to this stuff). thanks again! – Guaco

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

Chromatology

This one worked out of the box for me. I used it as such: $('<input >').appendTo('.class').typeahead([{...}]).get(0).focus(); – Trinidad

$(html), appending it using append(), then calling focus on the object... doesn't work. Same thing only using appendTo instead: did work. Get did not appear to be required, just calling appendTo. – Laclair

Answer 4

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.

Quatre

Thanks, now I know how to convert a html element given in String to jQuery object. – Guaco

Answer 5

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

Propagandize