Est-il possible de se concentrer sur un <div> à l'aide de JavaScript focus() la fonction?

Est-il possible de se concentrer sur un <div> à l'aide de JavaScript focus() fonction?

J'ai un <div> tag

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

Je suis en train d'essayer de se concentrer sur la ci-dessus <div> à l'aide de :

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

Mais ça ne fonctionne pas. Quelqu'un pourrait-il proposer quelque chose....?

  • Que voulez-vous arriver quand vous 'focus' il? Les Divs ne pas accepter d'entrée, alors, voulez-vous de flash de la frontière, ou flash un arrière-plan en évidence etc?
  • oui, j'ai besoin de <div> pour aller chercher l'attention de l'utilisateur...
  • double possible de Quels éléments HTML peuvent recevoir le focus?
  • Lire ceci: developer.mozilla.org/en/docs/Web/API/HTMLElement/focus
  • et quelqu'un d'autre, <div> les éléments peuvent accepter d'entrée si vous avez contenteditable définie sur true. ( La raison pour laquelle je me suis renseigné )
  • divs peut accepter d'entrée si elles débordent et afficher une barre de défilement. Lorsqu'un div avec une barre de défilement est concentré, la touche, les touches de défilement son contenu (plutôt que le contenu et d'autres éléments tels que body).

InformationsquelleAutor OM The Eternity | 2010-09-07
  1. 94
    window.location.hash = '#tries';

    Ce sera faites défiler jusqu'à l'élément en question, essentiellement "focus"ing il.

    • Chu : Sa fonctionne bien sous ie mais pas sous firefox, avez-vous une idée ?
    • Il ne fonctionne pas dans certaines versions de Chrome... Cependant, @vinoths solution n'
    • Cela fonctionne, mais... avec Angulaires vous avez des problèmes!!
    • Est-il une solution pour Angulaires?
    • de ne pas répondre à la concentration de question, cela ne devrait pas être la bonne réponse. dans mon cas, je veux me concentrer sur un "contentEditable' div, et votre astuce ne l'aide pas.
    InformationsquelleAutor Casey Chu
  2. 409

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

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

    Un tabindex 0 permet de mettre le tag "dans le naturel de l'ordre de tabulation de la page". Un nombre plus élevé de lui donner un ordre de priorité, où 1 sera le premier, 2 seconde et ainsi de suite.

    Vous pouvez également donner un tabindex de -1, ce qui fera de la div se concentrer uniquement-mesure par script, pas l'utilisateur.

    JS:

    document.getElementById('test').onclick = function () {
    document.getElementById('scripted').focus();
};

    CSS:

    div:focus {
    background-color: Aqua;
}

    HTML:

    <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, c'est une honte d'avoir un élément, vous pouvez vous concentrer par script que vous ne pouvez pas se concentrer par une autre méthode d'entrée (surtout si un utilisateur est seul clavier ou de la même manière limitée). Il y a aussi tout un tas d'éléments standards sont peut recevoir le focus par défaut et avoir des informations sémantiques cuit pour aider les utilisateurs. Utiliser ces connaissances à bon escient.

    • wow. Est-il de la croix-navigateur?
    • Et si à la place de <div> tag je suis à l'aide de <td>?
    • Mais ce n'est pas le porter à l'attention de l'utilisateur, il fait simplement tabable.
    • Shimmins, Cela permet à l'élément peut recevoir le focus (de manière non standard!) avec focus().
    • IE ne la supporte pas 🙁
    • James - c'est à dire certainement prend en charge cette. Je l'ai juste testé avec IE8 et il a bien fonctionné...
    • Si vous utilisez un indice négatif ( tabindex="-1" ), alors il ne peut pas être sélectionné via la touche tab, mais vous pouvez lui donner le focus à ça: snook.ca/archives/accessibility_and_usability/...
    • Je suis assez sûr que c'est exactement ce qu'il dit dans la dernière ligne de peut répondre. Laissez-moi savoir si vous pensez qu'il ya un problème que l'on doit modifier.
    • Oh, désolé, et c'est pourquoi vous ne rasent pas les réponses. Au moins, j'ai ajouté un lien vers un article intéressant sur le sujet. Désolé à ce sujet!
    • Si c'était pas clair, en ajoutant tabindex à un élément fera peut recevoir le focus, qui permet à l' focus() et blur() méthodes, et puis vous pouvez déclencher un accent comme ceci: document.getElementById('tries').focus();
    • "Mais ce n'est pas le porter à l'attention de l'utilisateur", Vous pouvez définir le style avec CSS à l'aide :focus. Fonctionne sur les principaux navigateurs, même sur MSIE en commençant par 9.
    • et vous pouvez également faire le contour:0; à l'aide de css donc il n'y aura pas de différence entre simple et onglet indexé div
    • Merci, maintenant je peux me concentrer un élément pour clavier-faites défiler la liste de contrôle: $('#scrollbykeyboard').attr('tabindex', 0).focus();
    • J'apprécie c'est une vieille réponse, mais en lui donnant un div tabindex de -1 qui ne fonctionne pas dans Firefox 42. J'ai dû lui donner un positif tabindex.
    • Salut @SteveOwen - il semble toujours travailler dans Firefox v42. J'ai ajouté un extrait de cette réponse si vous pouvez l'exécuter et de tester.
    • Salut @SteveFenton. Vous avez raison. Je suis désolé. J'aurais dû être plus précis. Je voulais le navigateur pour faire défiler jusqu'à l'élément quand il se concentre sur elle, et je ne pouvais pas obtenir que le travail avec un tabindex de -1, seulement quand je lui ai donné un indice positif.
    • à l'aide de window.location.hash = ... est la façon de le faire. l'accent se complique pas dire "mettre en vue", il signifie littéralement mettre l'accent sur cet élément.
    • Mais quand porté avec le javascript, l'élément ne semble pas obtenir le :focus règles css - developer.mozilla.org/en-US/docs/Web/CSS/:focus
    • a travaillé comme un charme, merci!
    • J'ai fait un codepen pour ceci: codepen.io/anon/pen/eKMgvJ
    • c'est une meilleure réponse. @communauté devrait marquer la place.

    InformationsquelleAutor Fenton
  3. 71

    document.getElementById('tries').scrollIntoView() œuvres. Cela fonctionne mieux que window.location.hash lorsque vous aurez résolu le positionnement.

    • Notez que cette solution ne fonctionne pas dans IE, Opera ou Safari.
    • J'ai juste essayé cela en Chrome de 65 ans et il ne fonctionne pas. La superposition div défile dans l'affichage, mais l'accent est toujours dans le fond de la div. Le seul moyen sûr et certain que je connaisse est d'avoir un tabbable élément (à l'aide de tabindex attribut) dans le revêtement de la div et l'utilisation focus() sur cet élément à la place.
    • déjà dit qu'il veut la div pour appeler l'attention de l'utilisateur, de sorte que ce dont il a besoin est de ne pas réellement se concentrer (même lorsque l'on travaille ce n'est pas correct de le faire) le div, mais de l'amener à l'écran, ce qui résout
    • Si je fais cela dans google Chrome, il garde le défilement de retour à la porté d'entrée. Surtout si la page n'est pas fini de se charger encore.
    InformationsquelleAutor vinoths
  4. 30

    Vous pouvez utiliser la propriété tabindex

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

    La valeur tabindex peut permettre à certaines comportement intéressant.

    • Si la valeur "-1", l'élément ne peut pas être à onglets, mais l'accent
      peut être donné à l'élément par programme (à l'aide de l'élément.focus()).
    • Si la valeur 0, l'élément peut être porté à l'aide du clavier
      et tombe dans la tabulation flux du document. Des valeurs supérieures à
      0 création d'un niveau de priorité, avec 1 étant le plus important.
    • Wow, merci truc génial. Merci!!!! Je n'aurais pas compris cela autrement.
    • Épargnant de vie, merci. En Bordure d'un div peut être porté, mais pas dans Chrome sans cette astuce. Accepté réponse est grande, mais je ne veux pas partie de l'url.
    InformationsquelleAutor Sarath Ak
  5. 13
    <div id="inner" tabindex="0">
    this div can now have focus and receive keyboard events
</div>
    • Cela fonctionne pour moi en Chrome/Chrome 46 seulement en combinaison avec $('#inner').focus();
    InformationsquelleAutor azad
  6. 2

    Je voulais proposer quelque chose comme Michael Shimmin mais sans le coder en dur des choses comme l'élément, ou le CSS qui lui est appliquée.

    Je suis seulement à l'aide de jQuery pour ajouter/supprimer de la classe, si vous ne voulez pas utiliser jquery, vous avez juste besoin d'un remplacement pour ajouter/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;
}
    InformationsquelleAutor Juan Mendes
  7. 0

    Faire de la frontière de flash, vous pouvez le faire:

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

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

    Cela rendra la frontière rouge fixe pendant 1 seconde, puis le retirer de nouveau.

    InformationsquelleAutor Michael Shimmins