web-dev-qa-db-fra.com

Définissez le focus du clavier sur un <div>

J'ai l'extrait de code suivant:

<div id="listbox1div" style="z-index:95; background:white; overflow-y:auto; overflow-x:hidden; width:240; height:314px;">
<a id="focusLink2"></a>
<table id="ptObj_listbox1...

J'ai une page qui construit des éléments <div> Dynamiquement (comme ci-dessus). Ce <div> Affiche les données en haut de l'écran principal. Lorsque la page génère les divs, je voudrais définir le focus. Je ne peux pas mettre de fonction onLoad sur la balise body car je ne sais pas quand les divs seront générées.

Une balise <div> Ne peut pas avoir de focus directement dessus. J'ai donc mis une balise <a> Vide avec un identifiant que j'appelle dans la fonction suivante:

function setTableFocus(count){
        var flinkText = 'focusLink'+count;
       document.getElementById(flinkText).focus();
}

Je ne reçois aucune erreur et je sais que la fonction est appelée lorsque la page est présentée (via des alertes). Cependant, lorsque j'utilise les touches fléchées ou le bouton Entrée, la page entière se déplace (pas même le div qui présente les données).

Lorsque je clique sur l'un des éléments du tableau (à l'aide de la souris). Après cela, l'événement keydown commence à fonctionner. Ce que j'aimerais que cela fasse, c'est de présenter les données à l'utilisateur et d'être automatiquement piloté par le clavier.

Quelqu'un a-t-il des suggestions pour y parvenir?

javascriptjqueryhtmlsetfocus
40
webdad3

vous pouvez rendre un div focalisable si vous ajoutez un attribut tabindex.

voir: http://snook.ca/archives/accessibility_and_usability/elements_focusable_with_tabindex

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.

MISE À JOUR: a ajouté une démo simple à http://jsfiddle.net/roberkules/sXj9m/

94
roberkules

La fonction qui génère dynamiquement les divs aura le contexte disponible pour savoir sur quel div se concentrer, après la dernière div sortie un script avec un scrollTo () pour se concentrer sur le div que vous voulez. Attribuez à chaque div un ID, afin que vous puissiez le choisir dans l'ensemble.

Response.Write "
<script language='text/javascript'>
document.getElementById('div#').scrollIntoView();
</script>
"
1
Lucent Fox

Vous ne pouvez pas concentrer un div. Voulez-vous dire concentrer une entrée?

Quoi qu'il en soit, vous pouvez inclure une balise de script courte pour concentrer quelque chose directement dans le code HTML - placez simplement le script juste après le div - ou même à l'intérieur du div.

0
Ariel

voulez-vous dire que vous souhaitez concentrer les divs chaque fois qu'il est généré? essayez de rechercher ces derniers

http://api.jquery.com/focus/

et

http://api.jquery.com/live/

et pour la touche ..

http://api.jquery.com/keypress/

les divs afaik et d'autres éléments peuvent avoir un focus quelconque comme dans les wikis, comme ..

http://en.wikipedia.org/wiki/JavaScript#Cross-site_vulnerabilities

et il défilera automatiquement là-bas. Je ne sais juste pas comment.

comme pour les divs et les tables générés dynamiquement, vous pouvez utiliser la fonction live () de jquery

0
kapitanluffy

Je résous cela en faisant le suivant:

<div tabindex="0" >
    <button onclick="element.parentNode.focus();"/>
</div>
0
IgniteCoders

Contrôlez-vous la fonction asp? Si oui, alors ce serait l'endroit le plus facile pour se concentrer. Sinon, vous pouvez écouter l'événement DOMNodeInserted (remarque: la prise en charge du navigateur peut varier) et définir le focus sur div (ou ses enfants) en fonction des conditions appropriées.

0
Mrchief

Vous pouvez utiliser getElementsByClassName

<div tabindex="0" class="to-focus">TEXT</div>
<script> document.getElementsByClassName('to-focus')[0].focus()</script>
0
Joe