verhindert, dass bestimmte Elemente aus dem Fokus erhält

So habe ich die folgende Funktion. Was es tut, ist das Fokusereignis auf alle Elemente zu hören. Wenn das Element entweder in $mobileMenu oder $menuItems es erlaubt es sonst entfernt es den Fokus:verhindert, dass bestimmte Elemente aus dem Fokus erhält

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); 
    } 
})

Das Problem, das ich habe, ist, dass dies den Benutzer von der Fokussierung auf irgendetwas verhindert auch immer, wenn ein normalerweise fokussierbare Element, das jetzt nicht ist Fokussierbar geht jedem meiner weiß aufgelisteten Elemente voraus, da es versucht, sich immer wieder auf das gleiche Element zu konzentrieren.

Wer weiß, wie ich es stattdessen auf die nächste fokussierbare Element überspringen erzählen?

Quelle

2014-01-07 George Reith

Vielleicht ist es die Platzierung des '' stopPropogation() '' Aussage? Ich bin etwas verwirrt von dem, was du direkt nach dem Code gesagt hast. – itdoesntwork

@itdoesntwork 'stopPropagation()' ist gut, weil wir nicht aufblasen und Ressourcen verschwenden wollen. Grundsätzlich ist der interne Registerkarte Index auf 'Unschärfe zurückgesetzt wird()', so dass jedes Mal, wenn Sie Tab es versucht, auf dem ersten tabbable Elemente zu konzentrieren, die unscharf werden und das nächste Mal, wenn Sie Tab es versuchen, es wieder zu wählen. –

e.preventDefault() könnte helfen? – Eric

Das funktioniert (aktualisiert):

$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(); 
    } 
})

(aktualisiert) Geige ->http://jsfiddle.net/CADjc/ Sie können in der Konsole sehen, die Elemente, die auf (main-menu a und mobile-menu)

Geprüft Fokus erhält:

<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>

Quelle

2014-01-07 01:25:22 davidkonrad

Danke ... aber das funktioniert nur, weil die Elemente direkt nebeneinander stehen (sonst 'next()' nicht funktioniert) in flow ... siehe http://jsfiddle.net/e96EV/2/ –

@ GeorgeReith du hast Recht, hast blind auf dem selbstgemachten Test Markup getestet, du hättest ein Markup-Beispiel zur Verfügung gestellt :) - siehe Update oben, und die aktualisierte Geige sowie. Warum schließen Sie Ihr Markup zB ?? (sah, dass in Ihrer Geige Update) – davidkonrad

Funktioniert wunderbar. –

Wenn Sie etwas deaktiviert machen, Es wird keinen Fokus erhalten. Zum Beispiel:

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

Fügen Sie es programmatisch, könnten Sie tun:

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

Quelle

2014-01-07 02:00:10

Dies funktioniert nicht für Ankerelemente. –

Deaktivierte Eingabeelemente werden beim Übergeben des Formulars nicht an den Server gesendet. Muss nicht viel mit dem aktuellen Szenario tun, aber gut im Auge behalten. – Antares42

Mein Tipp wäre, das Wort "etwas" durch "ein Formularelement" zu ersetzen, da "deaktiviert" nur für Formularelemente gilt und sonst nichts. – amn

attr ("Nur-Lesen", "Read-only"), verhindern Eingabefokus und den Wert an den Server senden, werden.

Quelle

2017-08-19 13:13:13

verhindert, dass bestimmte Elemente aus dem Fokus erhält

Antwort

Verwandte Themen