comment déplacer le focus d'une balise d'ancrage à une autre balise d'ancrage ?

utilisateur944513

Je suis confronté à un problème lorsque je me concentre sur un frère. anchor tagsJ'ai un parent DIVou à l' wrapperintérieur qu'il y en a peu DIVs(l'un de ces divs a une rh02currentclasse). Je veux me concentrer sur la anchorbalise qui est présente dans ce DIV qui a une rh02currentclasse.

Étapes à reproduire.

Exécutez l'application qui a deux champs de saisie. Cliquez sur n'importe quel champ de saisie. Puis appuyez sur TAB.
Il passe au champ de saisie suivant. Ensuite. appuyez à nouveau sur TAB
Il devrait aller à anchor tag or <a>quel parent a la rh02currentclasse. Ensuite, appuyez sur TAB
Il devrait aller au suivant (balise d'ancrage) ou le frère a le même parent ayant la rh02currentclasse.
Je veux également réinitialiser si cliquez à nouveau pour saisir le champ. Suivez à nouveau les mêmes étapes

j'ai essayé comme ça

     let index = 0;
          document.querySelector('#rc20p3').addEventListener('focusin', (e) => {
             console.log('-fous-')
        if(index < document.querySelector('.rh02current').querySelectorAll('a').length){
          console.log('---fous --');
          document.querySelector('.rh02current').querySelectorAll('a')[index].focus();
          index++
        }
          })
        document.querySelector('#rc20p3').addEventListener('focusout', (e) => {
        console.log('focus out')
        index =0 ;
     });

J'ai deux problèmes dans mon code. Tout d' abord, focusIn se déclenche deux fois. et la mise au point ne passe pas au suivant anchor tag. Dans mon exemple hello, la balise d'ancrage est présente. J'ai également essayé de mettre resetla valeur au point, cela ne fonctionne pas

voici mon code https://codesandbox.io/s/condescending-ride-lej3r?file=/index.html:6148-6681

Swati

Vous pouvez réaffecter la valeur lorsque la zone de saisie est mise au point car dans votre code, la valeur d'index au début l'est, 0mais la prochaine fois également, lorsque vous cliquez dessus, tabelle restera 0afin que seule la première abalise soit mise au point.

Code démo :

let index = 0;
let flg_first = true;
document.querySelector('#rc20p3').addEventListener('focusin', (e) => {
  //check if active elemnt is there inside rh02..div
  if (document.querySelector('.rh02current').contains(document.activeElement)) {
    if (index < document.querySelector('.rh02current').querySelectorAll('a').length) {
      document.querySelector('.rh02current').querySelectorAll('a')[index].focus();
      index++;

    }
  } else {
    //set first `a` focus 
    document.querySelector('.rh02current').querySelectorAll('a')[0].focus()
    index++;

  }

  if (index > document.querySelector('.rh02current').querySelectorAll('a').length) {
    document.querySelector('.rh02cnav').focus();
    index = 0 //restart from here..
  }
})

//when input is focus ..re assign value
function focusFunction() {
  index = 0
  flg_first = true;
}

<input type="text" onfocus="focusFunction()" />
<input type="text" onfocus="focusFunction()" />
<div id="rc20p3" class="rc20panel">
  <div class="rh02panel rh02carousel rh02carouselinit rh02random rh02p3   rh02stopped " data-trackas="rc20:panel3" role="button">
    <div class="rh02w2 rh02-slide1  bgimg rh02noscrim" data-position="0">
      <div class="rh02w3">
        <div class="rh02-pcontent">
          <div class="rh02-logo-md">
            <h2 class="rh02-ttl">Expanding the Possibilities of Hybrid Cloud with Oracle EVP Clay Magouyrk</h2>
            <div class="rh02-cta">
              <div class="obttns">
                <div><a data-lbl="cta-0209-panelx-pn-olive-hybrid-ondemand" href="https://www.oracle.com/events/live/expanding-possibilities-hybrid-cloud/?source=:ow:o:h:feb:::RC_WWMK201212P00001:Cta_0209_OLiveOCIfeb9OnDemandPanel3&amp;intcmp=:ow:o:h:feb:::RC_WWMK201212P00001:Cta_0209_OLiveOCIfeb9OnDemandPanel3">Watch on demand</a></div>
                <div><a data-lbl="cta-0209-panelx-pn-olive-hyrbid-pr-news" href="https://www.oracle.com/news/announcement/oracle-expands-hybrid-cloud-portfolio-with-roving-edge-infrastructure-020921.html?intcmp=OHPpanelx">Oracle Hybrid Cloud news</a></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="rh02w2 rh02-slide2 darktheme bgimg rh02noscrim rh02current " data-position="1" style="">
        <div class="rh02w3">
          <div class="rh02-pcontent">
            <h2 class="rh02-ttl">Oracle ATP recognized in Gartner Critical Capabilities Report</h2>
            <div class="rh02-leadin">
              <p>Oracle ranked highest in all four Use Cases in Gartner “2020 Critical Capabilities for Cloud Database Management Systems for Operational Use Cases” report.</p>
            </div>
            <div class="rh02-cta">
              <div class="obttns">
                <div><a data-lbl="cta-0201-panelx-pn-gart-newcopyandimage-db-crit-caps" href="https://www.oracle.com/database/gartner-dbms.html?intcmp=OHP0201">Read the Gartner report</a></div>
                <div><a data-lbl="cta-0201-panelx-pn-gart-newcopyandimage-db-crit-caps" href="https://www.oracle.com/database/gartner-dbms.html?intcmp=OHP0201">hello</a></div>

              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="rh02w2 rh02-slide3  bgimg   " data-position="2">
        <div class="rh02w3">
          <div class="rh02-pcontent">
            <h2 class="rh02-ttl oserif">From farmer to fork</h2>
            <div class="rh02-leadin">
              <p>Land O’Lakes relies on Oracle Cloud to power its supply chain.</p>
            </div>
            <div class="rh02-leadin">&nbsp;</div>
            <div class="rh02-cta">
              <div class="obttns">
                <div><a data-lbl="cta-0120-panelx-pn-cust-landolakes" href="https://www.oracle.com/customers/land-o-lakes/?intcmp=OHP0120">Learn more</a></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="rh02w2 rh02-slide4 darktheme bgimg rh02noscrim  " data-position="3">
        <div class="rh02w3">
          <div class="rh02-pcontent">
            <h2 class="rh02-ttl rh02-longttl">Try Cloud Free Tier</h2>
            <div class="rh02-leadin">
              <p>Oracle Cloud Free Tier lets anyone build, test, and deploy applications on Oracle Cloud—for free. Sign up once, get access to two free offers.</p>
            </div>
            <div class="rh02-cta">
              <div class="obttns">
                <div><a data-lbl="cta-1030-panelX-free-tier-pn" href="https://www.oracle.com/cloud/free/?source=:ow:o:h:feb::OHPpn1030&amp;intcmp=:ow:o:h:feb::OHPpn1030">Start your trial today</a></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="rh02w2 rh02-slide5 darktheme bgimg rh02noscrim  " data-position="4">
        <div class="rh02w3">
          <div class="rh02-pcontent">
            <h2 class="rh02-ttl rh02-longttl">70,000 people vaccinated in first week</h2>
            <div class="rh02-leadin">
              <p>Oracle builds Health Management Cloud used for COVID-19 clinical trials in U.S.</p>
              <p>Ghana uses the same cloud system to distribute Yellow Fever vaccine</p>
            </div>
            <div class="rh02-cta">
              <div class="obttns">
                <div><a data-lbl="cta-1123-panelx-health-covid-pn" href="https://www.oracle.com/corporate/citizenship/health/?intcmp=OHP1123-pn" title="Learn more">Learn more</a></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <ul class="rh02nav">
        <li><a class="" href="#1" title="View Slide 1"><b>View Slide 1</b></a></li>
        <li><a class="o-hf rh02cnav" href="#2" title="View Slide 2 rh02cnav"><b>View Slide 2</b></a></li>
        <li><a class="o-hf " href="#3" title="View Slide 3"><b>View Slide 3</b></a></li>
        <li><a class="o-hf " href="#4" title="View Slide 4"><b>View Slide 4</b></a></li>
        <li><a class="o-hf " href="#5" title="View Slide 5"><b>View Slide 5</b></a></li>
      </ul>
    </div>
  </div>

Cet article est collecté sur Internet, veuillez indiquer la source lors de la réimpression.

En cas d'infraction, veuillez [email protected] Supprimer.

modifier le2021-08-20

laisse moi dire quelques mots

0commentaires

connexionAprès avoir participé à la revue

Article précédent:Impossible d'ouvrir le fichier à l'aide du flottement du package open_file

TOP liste

article

comment déplacer le focus d'une balise d'ancrage à une autre balise d'ancrage ?

comment déplacer le focus d'une balise d'ancrage à une autre balise d'ancrage ?

Comment exécuter un fichier python avec des droits d'administrateur dans pycharm

comment obtenir un objet de requête dans les tests unitaires de django?

mongo kafka connect source

Vérifier la longueur du nombre à partir du message, puis utiliser la valeur dans l'instruction

comment convertir une chaîne en un tuple dateutil jour de la semaine sans utiliser eval

Comment ajouter un texte dans un texte Python/Tkinter

Aide de variable de débogage pprint jinja2

Dans les modèles Hugo, comment vérifier la longueur du tableau de fichiers JSON?

Impression de la longueur du chemin le plus court dans le labyrinthe

Exécuter la requête externe pour chaque date obtenue à partir de la requête interne

Recherche de dicton Jinja2 à l'aide d'une clé variable

Algorithme: diviser de manière optimale une chaîne en 3 sous-chaînes

Comment obtenir l'intégration contextuelle d'une phrase dans une phrase à l'aide de BERT ?

définir une propriété pour chaque nœud dans neo4j

Pourquoi cette requête Java échoue-t-elle? renvoyer 0 quand il y a des résultats

Comment changer le navigateur par défaut en Microsoft Edge pour Jupyter Notebook sous Windows 10 ?

Laravel 8: Attempt to read property "id" on null

Comment obtenir tous les champs d'un objet (y compris sa superclasse), à l'aide de l'API Mirrors de Dart?

Référencement des assemblys de structure .net 4.7 dans la solution .net core 2

Microsoft.WebApplication.targets

obtenir le nombre de marqueur affiché sur la carte