jQuery ostrości pole wprowadzania dynamicznego

Question

Chcę dodać pole tekstowe dynamicznie na mojej stronie, używając następującej jQuery:

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

i po zrobieniu tak, chcę pole wejściowe mają skupić się migający kursor tekstowy, więc Chcę wpisać ją zaraz po utworzeniu.

Czy ktoś mógłby mi powiedzieć, jak mogę to zrobić?

Próbowałem nazywając

$(inputNode).focus()

a także próbowali

$(inputNode).trigger('click')

ale żaden z nich nie pracował. Mogę pisać w polu po kliknięciu, ale jak już powiedziałem, chcę natychmiast wpisać bez żadnej interakcji.

Answer 1

Kiedy próbował $(inputNode).focus(), jQuery po prostu buduje nowy rozłączony (z DOM) <input> element, który był inny niż ten, który był załączony - choć odłączony jeden skupiła :-)

Istnieje kilka sposobów na skupienie danych wejściowych.

Jeśli można użyć HTML5 następnie dodając atrybut autofocus skupi wejście

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

Lub przy użyciu jQuery, trzeba znaleźć <input>po element został stworzony, aby zadzwonić .focus() na nim, ponieważ inputNode w twoim kodzie jest po prostu ciągiem, a nie obiektem jQuery.

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

Answer 2

Możesz przekonwertować go na obiekt jQuery przed dołączeniem go do dom, w ten sposób masz do niego odniesienie. Następnie wystarczy zadzwonić pod numer .focus w obiekcie, do którego następuje odwołanie. Jest to fiddle.

Answer 3

inputNode nie jest elementem jQuery, jest ciągiem znaków.

Prawdopodobnie chodziło

$('#inputNode').focus() 

w przeciwieństwie do:

$(inputNode).focus() 

Przeglądarka nie będzie narzekać na to, ponieważ masz zmienną o tej nazwie

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

działa dobrze dla mnie: http://jsfiddle.net/GqFap/9/

Answer 5

Trzeba coś takiego:

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

Sposób Focus jest metoda elementu DOM nie obiektu jQuery stąd potrzeba wywołania „get”.

Być może zechcesz przeczytać na appendTo i get metod w docs jQuery

Hope this helps