<div>JavaScript 関数の使用に焦点を当てることは可能ですかfocus()?
<div>タグがある
<div id="tries">You have 3 tries left</div>
私は以下を使用して上記に焦点を当てようとしています<div>:
document.getElementById('tries').focus();
しかし、うまくいきません。誰か何か提案してもらえますか?
ベストアンサー1
はい、可能です。これを行うには、タブインデックスを割り当てる必要があります...
<div tabindex="0">Hello World</div>
tabindex が 0 の場合、タグは「ページの自然なタブ順序」に配置されます。数値が大きいほど、特定の優先順位が与えられ、1 が 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>当然ですが、スクリプトでフォーカスできる要素を他の入力方法でフォーカスできないのは残念なことです (特にユーザーがキーボードのみを使用している場合や、同様の制約がある場合)。また、デフォルトでフォーカス可能で、ユーザーを支援するためのセマンティック情報が組み込まれている標準要素も多数あります。この知識を賢く活用してください。