Prévenir certains éléments de recevoir le focus

Donc, j'ai la fonction suivante. Ce qu'il fait est à l'écoute pour les événements de focus sur tous les éléments. Si cet élément est soit dans $mobileMenu ou $menuItems il permet, sinon, il enlève 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, c'est que cela empêche l'utilisateur de se concentrer sur quoi que ce soit si normalement focusable élément qui est maintenant non-focusable précède toute ma liste blanche des éléments qu'il tente de se recentrer sur le même élément, encore et encore.

Personne ne sait comment je peux au lieu de sauter à la prochaine peut recevoir le focus de l'élément?

C'est peut-être le placement de la stopPropogation() déclaration? Je suis un peu confus par ce que vous avez dit juste après le code.
stopPropagation() est bien parce que nous ne voulons pas de bulle et un gaspillage de ressources. Fondamentalement, l'intérieur de l'onglet index est remis sur blur() chaque onglet, il tente de se concentrer sur la première tabbable élément qui devient floue et la prochaine fois que vous onglet, il essaie de le sélectionner à nouveau.
e.preventDefault() pourrait aider ?
N'empêche pas les événements de focus, j'ai peur.
- Je point, cette approche pourrait rendre la page inutilisable pour les personnes qui utilisent des lecteurs d'écran. En essayant de contrôler la mise au point peut interférer avec le focus clavier, décourage les gens d'accéder au reste de la page.

OriginalL'auteur George Reith | 2014-01-07

  1. 4

    Cela fonctionne (mise à 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 le voir dans la console éléments qui 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>
    Merci... mais cela ne fonctionne que parce que les éléments sont directement à côté de l'autre (autrement next() ne fonctionne pas) dans le flux ... voir jsfiddle.net/e96EV/2
    vous avez raison, ont été aveuglément à l'essai sur l'selfmade test de balisage, vous ont fourni un exemple de balisage 🙂 - voir la mise à jour ci-dessus, et la mise à jour du violon comme wel. Pourquoi vous fermez votre balisage par exemple <input ../> ?? (vu que dans votre violon de mise à jour)
    Fonctionne à merveille.
    Viens de réaliser que cela ne fonctionne que si le permis peut recevoir le focus de l'élément est le premier focusable élément parent... voir jsfiddle.net/CADjc/2 - C'est à cause de next[0], je crois, qui ne teste que le premier élément trouvé. Aussi, j'ai fermé les éléments, parce JSfiddle a un moment difficile de la syntaxe ne sont pas fermées éléments (même si en cours de validité).
    Ok j'ai résolu le next[0] mais ça ne fonctionne toujours pas autour. Une fois qu'il obtient à la fin, il passe juste entre les deux dernières... jsfiddle.net/CADjc/3

    OriginalL'auteur davidkonrad

  2. 2

    attr("readonly","readonly"), éviter le focus d'entrée et la valeur SONT à envoyer au serveur.

    OriginalL'auteur mr. programmer

  3. 1

    Si vous faites quelque chose de handicapés, de ne pas recevoir le focus. Par exemple:

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

    Faire ajouter par programmation, vous pouvez faire:

    var el = document.getElementById('disableme');
el.setAttribute('disabled', 'disabled');
    Bien que cela ne fonctionne pas pour les éléments d'ancrage
    Désactivé éléments d'entrée ne sont pas envoyées au serveur lorsque le formulaire est soumis. Ne pas avoir à faire beaucoup avec le scénario actuel, mais bon de garder à l'esprit.
    Mon conseil serait de remplacer le mot "quelque chose" avec "un élément de formulaire", parce que disabled s'applique uniquement aux éléments de formulaire, et rien d'autre.

    OriginalL'auteur Harry Pehkonen

  4. 1

    Si vous définissez la propriété tabindex à "-1" sur l'élément, il ignore l'onglet. Pas sûr si cela fonctionne dans tous les navigateurs, mais il travaille dans Google Chrome.

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

    OriginalL'auteur npn_or_pnp