javascript - ボタンのクリック後に特定の div にフォーカスを合わせる

Question

特定のステージでさまざまなエンターテイメント プログラムを登録するためのページにフォームがあります。すべての詳細を送信し、送信ボタンをクリックした後、特定の日にそのステージにプログラムが存在するかどうかを確認する必要があります。プログラムが存在する場合、div は既存のプログラムを完全な詳細とともに表示する必要があります。私の問題は、プログラムが存在する場合、新しく生成された div に焦点を当てる必要があることです (つまり、div が表示され、編集は不要です)。 ）。divがAJAXの助けを借りて生成され、フォームが非常に長いため、ユーザーは上にスクロールしない限り、生成されたdivを見ることができないため、必要です。注意: div は最上位に作成されます。フォーム送信後にdiv部分を見えるようにする方法はありますか

Answer 1

通常、divに焦点を合わせることができません。ただし、tabindexを追加すると、機能します。

<div tabindex="0">test </div>

これがデモです：

.z{margin-top:800px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" onclick="$('.z')[0].focus()" value="test" />
<div>
    <div class="z" tabindex="0">test </div>
</div>

テストボタンをクリックすると、divがフォーカスされ、表示にジャンプします。クリックすると、私は次のようなことをしますdivElement.focus()

もう1つのオプションは、他の回答のように、新しく追加したdivを含む領域をスクロールすることです。

Answer 2

このようなコードを使用して、divにジャンプできます

$(window).scrollTop($('#new_div').offset().top-20)

Answer 3

次の方法でページの上部までスクロールできます。

window.scrollTo(0,0);

または次を使用してjQueryを使用：

$('html,body').scrollTop(0);

またはいくつかの楽しい効果で

$('html, body').animate({ scrollTop: 0 }, 'fast');

Answer 4

次のステートメントを使用するとうまくいきます。

document.getElementById('id').scrollIntoView();

Answer 5

<input type="button" onclick="$('#c')[0].focus()" value="test focus" />
<div>
    <div id="c" tabindex="1" style="margin-top:800px;">testing</div>
</div>

jsfiddle の例。

Answer 6

試すwindow.scrollTop = #VALUE;