web-dev-qa-db-ja.com

jQuery動的入力フィールドフォーカス

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

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

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

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

電話してみました

$(inputNode).focus()

そしてまた試した

$(inputNode).trigger('click')

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

jqueryfocusjquery-click-eventinput-field
16
Kumite

$(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>afterを見つける必要があります .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
andyb

あなたはこのようなものが必要です：

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

FocusメソッドはDOM要素notのメソッドであるため、 'get'を呼び出す必要があります。

JQueryドキュメントの appendTo および get メソッドを確認することをお勧めします

お役に立てれば

4
Nigel

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

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

$('#inputNode').focus()

とは対照的に：

$(inputNode).focus()

あなたはその名前の変数を持っているので、ブラウザはこれで不平を言うことはありません

4
Lee Taylor
<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
inser

Domに追加する前に、jQueryオブジェクトに変換できます。そうすれば、参照を取得できます。次に、参照されているオブジェクトに対して.focusを呼び出すだけです。

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

これが フィドル です。

2
aziz punjani