Динамическое поле ввода jQuery

Я хочу добавить поле ввода динамически на мою страницу, используя следующий jQuery:

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

и после этого я хочу, чтобы поле ввода фокусировалось с мигающим текстовым курсором, поэтому я хочу ввести его сразу после создания.

Может кто-нибудь, пожалуйста, скажите мне, как я могу это сделать?

Я пробовал звонить

$(inputNode).focus()

а также попробовали

$(inputNode).trigger('click')

но никто из них не работал. Я могу ввести в поле после нажатия на него, но, как я уже сказал, я хочу ввести без какого-либо взаимодействия сразу.

Ответ 1

Когда вы пробовали $(inputNode).focus(), jQuery просто создавал новый отключенный (из DOM) элемент <input>, который отличался от того, который вы добавили, хотя этот отключенный был сфокусирован: -)

Есть несколько способов сфокусировать вход.

Если вы можете использовать HTML5, то добавление атрибута autofocus будет фокусировать вход

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

Или, используя jQuery, вам нужно найти <input> после того, как элемент был создан для вызова .focus() на нем, так как inputNode в вашем коде - это просто строка, а не объект jQuery.

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

Ответ 2

inputNode не является элементом jQuery, это строка.

Вероятно, вы имеете в виду:

$('#inputNode').focus()

в отличие от:

$(inputNode).focus()

Браузер не будет ворчать, потому что у вас есть переменная с этим именем

Ответ 3

Вам нужно что-то вроде этого:

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

Метод фокусировки - это метод элемента DOM, а не объект jQuery, следовательно, требуется вызов "get".

Вам может понравиться читать appendTo и get в документах jQuery

Надеюсь, что это поможет

Ответ 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();    
    });
});

работает хорошо для меня: http://jsfiddle.net/GqFap/9/

Ответ 5

Вы можете преобразовать его в объект jQuery, прежде чем добавить его в dom, таким образом, у вас есть ссылка на него. Затем просто вызовите .focus на указанном объекте.

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

Здесь fiddle.