jQuery dynamische Eingabefeld Fokus

Question

Ich möchte ein Eingabefeld dynamisch auf meiner Seite mit dem folgenden jQuery hinzuzufügen:

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

und nach so tun, ich das Eingabefeld mit blinkenden Textcursor Fokus haben wollen, so Ich möchte es direkt nach der Erstellung eingeben.

Könnte mir bitte jemand sagen, wie kann ich das tun?

Ich habe versucht,

$(inputNode).focus()

Aufruf und haben auch

versucht

$(inputNode).trigger('click')

aber keiner von ihnen arbeitete. Ich kann in das Feld eingeben, nachdem ich darauf geklickt habe, aber wie gesagt, ich möchte ohne jede Interaktion sofort tippen.

Answer 1

Wenn Sie versucht $(inputNode).focus(), jQuery wurde einfach ein neues getrennt Gebäude (aus dem DOM) <input> Element, das auf der einen anders war man angehängt hatte - obwohl diese getrennt ein :-)

fokussiert wurde Es gibt ein paar von Möglichkeiten, den Input zu fokussieren.

Wenn Sie HTML5 dann verwenden können, Hinzufügen des autofocus Attribut wird das Eingangs

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

Oder mit jQuery konzentrieren, benötigen Sie bitte den <input>nach das Element finden erstellt wurde .focus() darauf zu nennen, wie die inputNode in Ihrem Code ist einfach eine Zeichenfolge und kein jQuery-Objekt.

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

Answer 2

Sie können es in ein jQuery-Objekt konvertieren, bevor Sie es an dom anhängen, so dass Sie einen Verweis darauf haben. Dann rufen Sie einfach .focus auf das referenzierte Objekt.

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

Hier ist ein fiddle.

Answer 3

inputNode ist kein jQuery Element, es ist ein String ist.

Sie meinen wohl:

$('#inputNode').focus() 

im Gegensatz zu:

$(inputNode).focus() 

Der Browser wird nicht auf diese schimpfen, da Sie eine Variable mit diesem Namen haben

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

funktioniert gut für mich: http://jsfiddle.net/GqFap/9/

Answer 5

Sie brauchen etwas wie folgt aus:

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

Der Fokus ist ein Verfahren des DOM-Elements nicht das jQuery-Objekt daher die Notwendigkeit für einen Anruf zu ‚erhalten‘.

Sie mögen vielleicht auf die appendTo und get Methoden in dem jQuery docs

Hoffnung zu lesen, dieser