в jQuery динамический фокус ввода в поле

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

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

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

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

Я пытался вызвать

$(inputNode).focus()

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

$(inputNode).trigger('click')

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

15
focus input-field jquery jquery-click-event

5 ответов

когда вы пытались $(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();
13

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

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

$('#inputNode').focus()

против:

$(inputNode).focus()

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

4

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

 $('<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/

3

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

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

здесь скрипка.

2