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

StackOverflow https://stackoverflow.com/questions/1433742

  •  07-07-2019
  •  | 
  •  

質問

動的にロードされる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>

どうもありがとう！

役に立ちましたか？

解決

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

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

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

他のヒント

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

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

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

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

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

マルタ

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

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

If 

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

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

firebugを使用して $（＆quot;＃header＆quot;）を実行し、返される結果を確認します。

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

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

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

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

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

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

$(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がプロパティまたは関数を設定しようとするオブジェクトを確認します。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top