16

次のjQueryを使用して、入力フィールドをページに動的に追加したいと思います。

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

その後、テキストカーソルを点滅させて入力フィールドにフォーカスを合わせたいので、作成直後に入力します。

誰かが私にこれを行う方法を教えてもらえますか？

電話してみました

$(inputNode).focus()

そしてまた試した

$(inputNode).trigger('click')

しかし、それらのどれも機能しませんでした。フィールドをクリックすると入力できますが、前述したように、すぐに操作せずに入力したいと思います。

4

5 に答える 5

15

あなたが試したとき$(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();
于 2012-10-25T13:03:27.940 に答える
4

次のようなものが必要です。

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

focusメソッドはjQueryオブジェクトではなくDOM要素のメソッドであるため、「get」を呼び出す必要があります。

あなたはappendToを読んで、jQueryドキュメントのメソッドを取得したいかもしれません

お役に立てれば

于 2012-10-25T13:10:49.640 に答える
4

inputNodeはjQuery要素ではなく、文字列です。

あなたはおそらく意味します：

$('#inputNode').focus()

とは対照的に：

$(inputNode).focus()

その名前の変数があるので、ブラウザはこれで不平を言うことはありません

于 2012-10-25T13:03:37.570 に答える
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();    
    });
});

私にとってはうまくいきます：http：//jsfiddle.net/GqFap/9/

于 2012-10-25T13:10:04.797 に答える
2

domに追加する前にjQueryオブジェクトに変換することができます。そうすれば、それを参照できます。次に、参照されているオブジェクトを呼び出し.focusます。

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

これがフィドルです。

于 2012-10-25T13:03:25.797 に答える