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.

andyb · Accepted Answer · 2012-10-25T13:10:22.523

15

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

edited Oct 25 '12 at 13:10

answered Oct 25 '12 at 13:03

andyb

43,435
12
121
150

Many thanks! This is the 3rd correct way to do it, you were really helpful, all of you! – Kumite Oct 25 '12 at 13:15
1

This one does not work for me because when $('div input').focus(); is run, the element seems not to exist. – Jose Luis de la Rosa Aug 21 '15 at 00:36
Autofocus only works for the first textbox, and focus works all the time for me. – Tony Dong Feb 24 '17 at 22:29

score 4 · Answer 2 · answered Oct 25 '12 at 13:03

4

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

answered Oct 25 '12 at 13:03

Lee Taylor

7,761
16
33
49

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! – Kumite Oct 25 '12 at 13:09

score 4 · Answer 3 · answered Oct 25 '12 at 13:10

4

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

answered Oct 25 '12 at 13:10

Nigel

1,291
11
7

This one worked out of the box for me. I used it as such: `$('').appendTo('.class').typeahead([{...}]).get(0).focus();` – JoshP Jan 08 '14 at 20:01
$(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. – neminem Jul 22 '14 at 16:43

score 3 · Answer 4 · answered Oct 25 '12 at 13:03

3

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.

answered Oct 25 '12 at 13:03

aziz punjani

25,586
9
47
56

Thanks, now I know how to convert a html element given in String to jQuery object. – Kumite Oct 25 '12 at 13:14

score 3 · Answer 5 · answered Oct 25 '12 at 13:10

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

jQuery dynamic input field focus

5 Answers5