Est-il possible de se concentrer sur un <div> utiliser la fonction javascript focus ()?

Question

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

J'ai un tag <div>

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

J'essaie de me concentrer sur les <div> ci-dessus en utilisant:

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

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

Answer 1

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 secondes et ainsi de suite.

Vous pouvez également donner un tabindex de -1, ce qui permettra à la div de ne pouvoir se focaliser que par script, pas par l'utilisateur.

Answer 2

 window.location.hash = '#tries';
 

Cela fera défiler jusqu'à l'élément en question, essentiellement le "focus".

Answer 3

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

Answer 4

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

J'utilise uniquement jQuery pour ajouter / supprimer une classe. Si vous ne voulez pas utiliser jquery, vous avez simplement besoin d'un remplacement pour ajouter / supprimerClass.

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

Answer 5

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

La bordure restera rouge pendant 1 seconde, puis supprimez-la à nouveau.