次のjQueryを使用して、入力フィールドをページに動的に追加したいと思います。
_var inputNode = "<input id='inputNode' class='tiContent' type='text'
placeholder='text input...'/>";
$("div").append(inputNode);
_
その後、テキストカーソルを点滅させて入力フィールドにフォーカスを合わせたいので、作成直後に入力します。
誰かが私にこれを行う方法を教えてもらえますか?
電話してみました
$(inputNode).focus()
そしてまた試した
$(inputNode).trigger('click')
しかし、それらのどれも機能しませんでした。フィールドをクリックすると入力できますが、先ほど言ったように、すぐに操作せずに入力したいと思います。
$(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();
inputNodeはjQuery要素ではなく、文字列です。
あなたはおそらく意味します:
$('#inputNode').focus()
とは対照的に:
$(inputNode).focus()
あなたはその名前の変数を持っているので、ブラウザはこれで不平を言うことはありません
<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/
Domに追加する前に、jQueryオブジェクトに変換できます。そうすれば、参照を取得できます。次に、参照されているオブジェクトに対して.focus
を呼び出すだけです。
var $inputNode = $("<input id='inputNode' class='tiContent' type='text' placeholder='text input...'/>");
$('body').append($inputNode);
$inputNode.focus();
これが フィドル です。