web-dev-qa-db-fra.com

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

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

J'ai une balise <div>

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

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

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

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

javascriptfocus
197
OM The Eternity
window.location.hash = '#tries';

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

94
Casey Chu

Oui, c'est possible. Pour ce faire, vous devez affecter 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, etc.

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.

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>

De toute évidence, il est dommage d'avoir un élément sur lequel vous pouvez vous concentrer par script, mais pas avec une autre méthode de saisie (surtout si l'utilisateur est uniquement au clavier ou contraint de la même manière). Il y a aussi toute une série d'éléments standard qui sont peuvent être focalisés par défaut et contiennent des informations sémantiques pour aider les utilisateurs. Utilisez cette connaissance à bon escient.

391
Fenton

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

69
vinoths

Vous pouvez utiliser Tabindex

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

La valeur tabindex peut permettre un comportement intéressant.

  • Si la valeur "-1" lui est attribuée, l'élément ne peut pas être tabulé, mais l'élément peut être mis en évidence par programme (à l'aide de element.focus ()).
  • Si la valeur 0 est donnée, l'élément peut être mis au point 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.
28
Sarath Ak
<div id="inner" tabindex="0">
    this div can now have focus and receive keyboard events
</div>
13
azad

Je voulais suggérer quelque chose comme celui de Michael Shimmin, mais sans coder en dur des éléments comme 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;
}
2
Juan Mendes

Cela fera également défiler le navigateur pour l'élément correspondant avec id

var target = document.getElementById("target");
target.parentNode.scrollTop = target.offsetTop;

target.parentNode.scrollTop peut être remplacé par window.scrollTop si vous voulez faire défiler la fenêtre entière

1
Samuel J Mathew

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 sera rouge pendant 1 seconde, puis supprimez-la à nouveau.

0
Michael Shimmins

Essaye ça -

$("html, body").stop().animate({ scrollTop: $("#inner").offset().top - 80 }, 1500, "easeInOutExpo"), e.preventDefault();

0
UMA MAHESHWARI