web-dev-qa-db-ja.com

JavaScriptのfocus（）関数を使って<div>に焦点を合わせることは可能ですか？

JavaScriptのfocus()関数を使って<div>に集中することは可能ですか？

<div>タグがあります

<div id="tries">You have 3 tries left</div>

私は上記の<div>に焦点を当てることを試みています：

document.getElementById('tries').focus();

しかし、うまくいきません。誰かが何かを提案できますか？

javascriptfocus
191
OM The Eternity
window.location.hash = '#tries';

これは問題の要素までスクロールし、本質的にそれに "焦点を合わせ"ます。

92
Casey Chu

はい、これは可能です。それをするために、あなたはtabindexを割り当てる必要があります...

<div tabindex="0">Hello World</div>

Tabindexが0の場合、タグは「ページの自然なタブ順序で」配置されます。数値が大きいほど、特定の優先順位が付けられます。1が最初、2が2番目になります。

Tabindexに-1を指定することもできます。これはdivではユーザーによってではなくスクリプトによってのみフォーカス可能になります。

document.getElementById('test').onclick = function () {
    document.getElementById('scripted').focus();
};
div:focus {
    background-color: Aqua;
}
<div>Element X (not focusable)</div>
<div tabindex="0">Element Y (user or script focusable)</div>
<div tabindex="-1" id="scripted">Element Z (script-only focusable)</div>
<div id="test">Set Focus To Element Z</div>

スクリプトでフォーカスできる要素が他の入力方法ではフォーカスできないことは明らかに残念です（特にユーザーがキーボードのみ、または同様に制約されている場合）。 areデフォルトでフォーカス可能で、ユーザーを支援するために意味情報が組み込まれている標準的な要素もたくさんあります。この知識を賢く使ってください。

385
Fenton

document.getElementById('tries').scrollIntoView()は動作します。固定位置の場合、これはwindow.location.hashよりもうまく機能します。

68
vinoths

あなたはtabindexを使うことができます

<div tabindex="-1"  id="tries"></div>

Tabindex値は、いくつかの興味深い動作を可能にします。

  • "-1"の値が与えられた場合、要素はタブ移動できませんが、プログラム的に（element.focus（）を使用して）要素にフォーカスを移動できます。
  • 値0を指定すると、要素はキーボードを介してフォーカスされ、ドキュメントのタブ移動フローに入ります。 0より大きい値は優先順位レベルを作成し、1が最も重要です。
23
Sarath Ak
<div id="inner" tabindex="0">
    this div can now have focus and receive keyboard events
</div>
12
azad

Michael Shimminのようなものを提案したいのですが、要素やそれに適用されるCSSのようなものをハードコーディングすることはしません。

私はあなたがjqueryを使用したくない場合は、追加/削除クラスにjQueryを使用しています、あなただけのadd/removeClassの代わりが必要です

- ジャバスクリプト

function highlight(el, durationMs) { 
  el = $(el);
  el.addClass('highlighted');
  setTimeout(function() {
    el.removeClass('highlighted')
  }, durationMs || 1000);
}

highlight(document.getElementById('tries'));

--CSS

#tries {
    border: 1px solid gray;
}

#tries.highlighted {
    border: 3px solid red;
}
2
Juan Mendes

これはまた、ブラウザをidを持つ対応する要素にスクロールします。

var target = document.getElementById("target");
target.parentNode.scrollTop = target.offsetTop;

ウィンドウ全体をスクロールしたい場合は、target.parentNode.scrollTopをwindow.scrollTopに置き換えることができます。

1
Samuel J Mathew

枠線を点滅させるには、次のようにします。

function focusTries() {
    document.getElementById('tries').style.border = 'solid 1px #ff0000;'
    setTimeout ( clearBorder(), 1000 );
}

function clearBorder() {
    document.getElementById('tries').style.border = '';
}

これにより、枠が1秒間赤く点灯してから削除されます。

0
Michael Shimmins

これを試して -

$("html, body").stop().animate({ scrollTop: $("#inner").offset().top - 80 }, 1500, "easeInOutExpo"), e.preventDefault();

0
UMA MAHESHWARI