JavaScriptのfocus（）関数を使用して<div>にフォーカスすることは可能ですか？

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

私が持っている<div>タグを

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

私は<div>使用して上記に焦点を当てようとしています：

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

しかし、それは機能しません。誰かが何かを提案できますか....？

window.location.hash = '#tries';

これは問題の要素にスクロールし、本質的にそれを「フォーカス」します。

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

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

tabindexが0の場合、タグは「ページの通常のタブ順」に配置されます。数値が大きいほど優先順位が高くなります。1が最初、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>

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

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

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

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

tabindex値は、興味深い動作を可能にします。

• 「-1」の値を指定した場合、要素にタブを付けることはできませんが、プログラムによって（element.focus（）を使用して）要素にフォーカスを与えることができます。
• 値が0の場合、要素はキーボードを介してフォーカスされ、ドキュメントのタブフローに分類されます。0より大きい値は優先度レベルを作成し、1が最も重要です。

<div id="inner" tabindex="0">
    this div can now have focus and receive keyboard events
</div>

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

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

--Javascript

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

ボーダーを点滅させるには、次のようにします。

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

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

これにより、ボーダーが1秒間赤くなり、その後再び削除されます。