Est-il possible de se concentrer sur une <div> en utilisant la fonction JavaScript focus ()?

Est-il possible de se concentrer sur une fonction <div>utilisant JavaScript focus()?

J'ai un <div>tag

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

J'essaie de me concentrer sur ce qui précède en <div>utilisant:

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

Mais ça ne marche pas. Quelqu'un pourrait-il suggérer quelque chose ...?

window.location.hash = '#tries';

Ceci défilera jusqu'à l'élément en question, essentiellement "le focalisera".

Oui, c'est possible. Pour ce faire, vous devez attribuer un tabindex ...

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

Un tabindex de 0 mettra la balise "dans l'ordre de tabulation naturel de la page". Un nombre plus élevé lui donnera un ordre de priorité spécifique, où 1 sera le premier, 2 le second et ainsi de suite.

Vous pouvez également donner un tabindex de -1, ce qui rendra la div uniquement focalisable par script, pas l'utilisateur.

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>

Évidemment, il est dommage d'avoir un élément que vous pouvez focaliser par script que vous ne pouvez pas focaliser par une autre méthode d'entrée (surtout si un utilisateur est uniquement clavier ou contraint de manière similaire). Il existe également toute une série d'éléments standard pouvant être focalisés par défaut et contenant des informations sémantiques pour aider les utilisateurs. Utilisez ces connaissances à bon escient.

document.getElementById('tries').scrollIntoView()travaux. Cela fonctionne mieux que window.location.hash lorsque vous avez un positionnement fixe.

Vous pouvez utiliser tabindex

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

La valeur tabindex peut permettre un comportement intéressant.

• Si on lui donne une valeur de "-1", l'élément ne peut pas être tabulé mais le focus peut être donné à l'élément par programme (en utilisant element.focus ()).
• Si on lui donne une valeur de 0, l'élément peut être focalisé via le clavier et tombe dans le flux de tabulation du document. Les valeurs supérieures à 0 créent un niveau de priorité, 1 étant le plus important.

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

Je voulais suggérer quelque chose comme Michael Shimmin mais sans coder en dur des éléments comme l'élément ou le CSS qui lui est appliqué.

J'utilise seulement jQuery pour ajouter / supprimer la classe, si vous ne voulez pas utiliser jquery, vous avez juste besoin d'un remplacement pour add / removeClass

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

Pour faire clignoter la bordure, vous pouvez faire ceci:

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

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

Cela rendra la bordure rouge fixe pendant 1 seconde, puis retirez-la à nouveau.