web-dev-qa-db-fra.com

Empêcher certains éléments de recevoir le focus

J'ai donc la fonction suivante. Ce qu'il fait, c'est écouter l'événement focus sur tous les éléments. Si cet élément est soit dans $mobileMenu ou $menuItems il le permet sinon il supprime le focus:

var $body = $("body");
var $mobileMenu = $("#mobile-menu");
var $menuItems = $("#main-menu a");

$body.on("focus.spf", "*", function(e){
  e.stopPropagation();
  $this = $(this);

  // Prevent items from recieving focus and switching view
  if (!$this.is($mobileMenu) && !$this.is($menuItems)) {
    $this.blur();
  } else {
    console.log(this);
  }
})

Le problème que j'ai est que cela empêche l'utilisateur de se concentrer sur quoi que ce soit si un élément normalement focalisable qui n'est plus focalisable précède l'un de mes éléments sur liste blanche car il tente simplement de se recentrer sur le même élément encore et encore.

Est-ce que quelqu'un sait comment je peux lui dire de passer au prochain élément focalisable?

javascriptjqueryhtmlaccessibility
15
George Reith

Cela fonctionne (mis à jour):

$body.on("focus.spt", "*", function(e){
  $this = $(this);
  if (!$this.is($mobileMenu) && !$this.is($menuItems)) {
    $this.blur();
    var next=$this.nextAll().find('a,input');
    if (next.length>0) next[0].focus();
  } else {
    console.log('ok',this);
    e.stopPropagation();
  }
})

(mise à jour) violon -> http://jsfiddle.net/CADjc/ Vous pouvez voir dans la console quels éléments reçoit le focus (main-menu a et mobile-menu)

Testé sur:

<input type="text" tabindex="1" value="test">
<span><input type="text" tabindex="2" value="test"></span>
<div><input type="text" id="mobile-menu" tabindex="3" value="mobile-menu"></div>
<div><span>
    <div id="main-menu">
        <a tabindex="4">main-menu</a>
        <a tabindex="5">main-menu</a>
    </div>
</span></div>
<span>
<input type="text" tabindex="6" value="test">
</span>
4
davidkonrad

Si vous définissez le tabindex sur "-1" sur l'élément, il ignorera l'onglet. Je ne sais pas si cela fonctionne dans tous les navigateurs, mais cela fonctionne dans Google Chrome.

<input type="text" tabindex="-1"/>
5
npn_or_pnp

attr ("en lecture seule", "en lecture seule"), empêche le focus d'entrée et la valeur SONT envoyés au serveur.

3
mr. programmer

Si vous désactivez quelque chose, il ne recevra pas le focus. Par exemple:

<input type="text" disabled="disabled" />

Ajoutez-le par programme, vous pouvez faire:

var el = document.getElementById('disableme');
el.setAttribute('disabled', 'disabled');
2
Harry Pehkonen