jQuery dynamique d'entrée sur un champ de

Je veux ajouter un champ de saisie de manière dynamique sur ma page à l'aide de la suite de jQuery:

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

et après l'avoir fait, je veux que le champ de saisie le focus avec le clignotement du curseur de texte, donc j'ai envie de taper dans juste après la création.

Quelqu'un pourrait-il me dire comment puis-je faire cela?

J'ai essayé d'appeler

$(inputNode).focus()

et ont également essayé

$(inputNode).trigger('click')

mais aucun d'entre eux travaillaient. Je peux taper dans le champ après avoir cliqué sur, mais comme je l'ai dit j'ai envie de taper sans aucune interaction immédiatement.

OriginalL'auteur Kumite | 2012-10-25

  1. 13

    Lorsque vous avez essayé $(inputNode).focus(), jQuery a été tout simplement la construction d'une nouvelle déconnecté (à partir du DOM) <input> élément qui était différent de celui que vous aviez ajouté à la suite, bien que ce déconnectés l'un a porté 🙂

    Il ya un couple de façons de concentrer l'entrée.

    Si vous pouvez utiliser HTML5 puis ajouter le autofocus attribut portera l'entrée

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

    Ou, à l'aide de jQuery, vous devez trouver le <input> après l'élément a été créé pour appeler .focus(), comme le inputNode dans votre code est simplement une chaîne de caractères et non un objet jQuery.

    var inputNode = '<input id="inputNode" class="tiContent" type="text" placeholder="text input..."/>';
$('div').append(inputNode);
$('div input').focus(); //or $('#inputNode').focus();
    Merci beaucoup! C'est la 3ème façon correcte de le faire, vous avez été vraiment utile, vous tous!
    Celui-ci ne fonctionne pas pour moi parce que quand $('div entrée').focus(); est exécuté, l'élément semble ne pas exister.
    L'Autofocus ne fonctionne que pour la première zone de texte, et de se concentrer travaille tout le temps pour moi.

    OriginalL'auteur andyb

  2. 4

    inputNode n'est pas un élément jQuery, c'est une chaîne.

    Tu veux sans doute dire:

    $('#inputNode').focus()

    par opposition à:

    $(inputNode).focus()

    Le navigateur ne va pas se plaindre à ce que vous avez obtenu une variable de même nom

    Salut à tous! Merci beaucoup, cela fonctionne. Je pensais que les environs de $() permet de convertir un objet jQuery. (Je suis assez nouveau à ce genre de choses). merci encore!

    OriginalL'auteur Lee Taylor

  3. 4

    Vous besoin de quelque chose comme ceci:

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

    Le focus est une méthode de l'élément DOM pas l'objet jQuery d'où la nécessité d'un appel à "obtenir".

    Vous pouvez lire sur le appendTo et obtenez de l' méthodes de jQuery docs

    Espère que cette aide

    Ceci a travaillé hors de la boîte pour moi. Je l'ai utilisé en tant que tel: $('<input >').appendTo('.class').typeahead([{...}]).get(0).focus();
    $(html), en ajoutant à l'aide de l'option append(), puis en appelant le focus sur l'objet... ne fonctionne pas. Même chose en utilisant uniquement appendTo plutôt: avez-travail. Obtenir ne semble pas être nécessaire, il suffit d'appeler appendTo.
    Merci!! Cette réponse a fonctionné pour moi

    OriginalL'auteur Nigel

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

    fonctionne bien pour moi: http://jsfiddle.net/GqFap/9/

    OriginalL'auteur inser

  5. 2

    Vous pouvez le convertir dans un objet jQuery avant d'ajouter à la dom, de cette manière vous avez une référence à elle. Puis il suffit d'appeler .focus sur l'objet référencé. 

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

    Voici un violon.

    Merci, maintenant je sais comment faire pour convertir un élément html donné dans la Chaîne de l'objet jQuery.

    OriginalL'auteur aziz punjani