web-dev-qa-db-ja.com

動的にロードされたDIVのフィールドにフォーカスを設定します

動的にロードされるDIV内の特定のフィールドにフォーカスを設定する適切な方法は何ですか？

$("#display").load("?control=msgs"); // loads the HTML into the DIV
$('#display').fadeIn("fast"); // display it
$("tex#header").focus();          // ?? neither that
$("input#header").focus();        // ?? nor that
$('#display', '#header').focus()  // ?? nor that
$("#header").focus();             // ?? nor that works

次のHTMLがdisplay DIVにフェッチされます。

<div id="display">
<form id="newHeaderForm" class="dataform" action="/" method="post">
    <input id="to" type="hidden" value="22" name="to"/>
    <dl>
        <dt>Header</dt>
        <dd>
            <input id="header" class="large" type="text" name="header" value="" maxlength="128"/>
        </dd>
 </form>
 </div>

とても感謝しています！

jqueryhtmlfocussetfocus
41
MrG

Load（）関数は非同期関数です。 load（）呼び出しが終了した後、つまりload（）のコールバック関数内にフォーカスを設定する必要があります。そうしないと、＃headerで参照している要素がまだ存在しないためです。例えば：

$("#display").load("?control=msgs", {}, function() { 
  $('#header').focus();
});

私はこのソリューションでも問題を抱えていたので、コールバックでsetTimeoutを実行し、タイムアウトにフォーカスを設定して/ really /要素が存在することを確認しました。

57
Jan Willem B

IDで単純に選択してみましたか？

$("#header").focus();

Idは一意である必要があるため、より具体的なセレクタを用意する必要はありません。

12
Paul Suart

はい、これは、まだ存在しない要素を操作するときに発生します（ここにいるいくつかの貢献者も、一意のIDで良い点を指摘しました）。私は同様の問題に遭遇しました。また、すぐにレンダリングされる要素を操作する関数に引数を渡す必要があります。

ここでチェックした解決策は役に立たなかった。最後に、すぐに使えるものを見つけました。そして、それも非常にきれいです-クロージャー。

の代わりに：

$( '#header' ).focus();
or the tempting:
setTimeout( $( '#header' ).focus(), 500 );

これを試して：

setTimeout( function() { $( '#header' ).focus() }, 500 );

私のコードでは、引数を渡すテストで、これは機能せず、タイムアウトは無視されました：

setTimeout( alert( 'Hello, '+name ), 1000 );

これは機能し、タイムアウトが刻みます：

setTimeout( function() { alert( 'Hello, '+name ) }, 1000 );

W3schoolsがそれについて言及していないのは残念です。

クレジット： makemineatriple.com .

うまくいけば、これはここに来る人の助けになります。

マルタス

8
Arta

もし

_$("#header").focus();
_

動作していない場合、ヘッダーのIDを持つページに別の要素がありますか？

Firebugを使用して$("#header")を実行し、何が返されるかを確認してください。

3
Bela
$("#display").load("?control=msgs", {}, function() { 
  $('#header').focus();
});

試してみましたが、うまくいきません。この問題を解決するためのアドバイスをお願いします。ご協力いただきありがとうございます

3
xman

Omuが指摘したように、ドキュメント準備機能にフォーカスを設定する必要があります。 jQueryが提供します。そして、IDを選択します。たとえば、ログインページがある場合：

$(function() { $("#login-user-name").focus(); }); // jQuery rocks!
2
Per Lindberg

これはページの読み込み時に実行されます。

<script type="text/javascript">
    $(function () {
        $("#header").focus();
    });
</script>
1
Doomsknight

動的に追加されたアイテムはDOMに追加する必要があります... clone().append()はDOMに追加します...これにより、jqueryを介して選択できます。

1
BCnuckles
$(function (){
    $('body').on('keypress','.sobitie_snses input',function(e){
        if(e.keyCode==13){
            $(this).blur();
            var new_fild =  $(this).clone().val('');
            $(this).parent().append(new_fild);
            $(new_fild).focus();
        }
    });
});

エラーのほとんどは、Uが間違ったオブジェクトを使用してプロパティまたは関数を設定するためです。 console.log（new_fild）;を使用します。 Uがどのオブジェクトにproreptyまたは関数を設定しようとするかを確認します。

0
skinny
$("#header").attr('tabindex', -1).focus();
0
ashu