Är det möjligt att fokusera på en <div> med JavaScript-funktionen focus()?

Är det möjligt att fokusera på en <div> med JavaScript focus()-funktion?

Jag har en <div>-tagg

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

Jag försöker fokusera på ovanstående <div> med hjälp av :

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

Men det fungerar inte. Kan någon föreslå något....?

Svar #1

Ja - detta är möjligt. För att göra det behöver du tilldela en tabindex...

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

Ett tabindex på 0 kommer att placera taggen "i sidans naturliga tabbordning". Ett högre nummer kommer att ge det en specifik prioritetsordning, där 1 blir först, 2 andra och så vidare.

Du kan också ge ett tabindex på -1, vilket gör att div:en endast kan fokuseras av skript, inte av användaren.

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>

Uppenbarligen är det synd att ha ett element som du kan fokusera med ett script men som du inte kan fokusera med andra inmatningsmetoder (speciellt om en användare endast använder tangentbord eller är på liknande sätt begränsad). Det finns också en hel mängd standardelement som är fokuserbara som standard och har semantisk information inbakad för att hjälpa användare. Använd denna kunskap klokt.

Svar #2

window.location.hash = '#tries';

Detta kommer att scrolla till det aktuella elementet, i princip "fokusera" det.

Svar #3

document.getElementById('tries').scrollIntoView() fungerar. Detta fungerar bättre än window.location.hash när du har fixerad positionering.

Svar #4

Du kan använda tabindex

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

Tabindex-värdet kan möjliggöra ett intressant beteende.

  • Om ett värde av "-1" anges, kan inte elementet tabbas till men fokus kan ges till elementet programmässigt (med hjälp av element.focus()).
  • Om ett värde på 0 anges kan elementet fokuseras via tangentbordet och ingår i dokumentets tabbflöde. Värden större än 0 skapar en prioritetsnivå där 1 är viktigast.

Svar #5

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

Svar #6

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>

Relaterade artiklar