41

動的に読み込まれた 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 がdisplayDIVにフェッチされます。

<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>

大変感謝します！

4

9 に答える 9

57

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

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

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

于 2009-09-16T16:17:33.750 に答える
9

はい、これはまだ存在しない要素を操作するときに発生します（ここの数人の貢献者も一意の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。

うまくいけば、これはここに来る誰かを助けるでしょう。

于 2011-01-10T00:36:16.803 に答える
3

もしも

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

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

firebug を使用して実行$("#header")し、何が返されるかを確認します。

于 2009-09-16T16:16:18.483 に答える
2

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

$(function() { $("#login-user-name").focus(); }); // jQuery rocks!
于 2011-06-23T14:51:05.863 に答える
1

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

<script type="text/javascript">
    $(function () {
        $("#header").focus();
    });
</script>
于 2012-05-03T14:23:43.027 に答える
1

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

于 2010-06-18T20:02:10.507 に答える
0 
$("#header").attr('tabindex', -1).focus();
于 2012-05-18T12:11:43.137 に答える