JavaScript Button Focus deaktivieren

pineapplefreak · 12. November 2017

Hallo ihr!

Nachdem meine letzte Frage hier sehr gut beantwortet wurde, habe ich hier eine nächste Frage!
Ich habe eine große Menge an Buttons. Jetzt will ich diesen auf jedem dieser Buttons den "Focus" unterbinden.
Das ist z.B. dieser gepunktete Rand, den jeder Button/Link bekommt, wenn man auf einer Seite durchtabt. Dieser Focus ist dazu gedacht, dass man z.B. mit Enter den fokussierten Button auslösen kann. Das will ich unterbinden. Wie könnte ich das anstellen?

Vielen Dank schon für die Antworten!

lg

Bagbag · 12. November 2017

Versuchs mal mit tabindex="-1"

pineapplefreak · 12. November 2017

Problem ist, dann erscheint der Fokus trotzdem auf einem Button, nachdem man ihn angeklickt hat. Bzw. will ich ja durch andere Buttons tabben können. Ich will nur eine bestimmte Menge vom "Focussieren" ausschließen.

Bagbag · 12. November 2017

Verhindern dass man mit Tab etwas fokussieren kann: tabindex="-1"
Fokus bei fokussieren entfernen (also effektiv überhaupt nicht fokussierbar): onfocus="this.blur()"

Bei letzterem könnte ich mir vorstellen, dass man dadurch nicht weitertabben kann, dann müsstest du zusätzlich noch den nächsten Button mit button.focus() fokussieren.

Edit: Das Standardverhalten bei einem Klick deaktivieren könnte auch noch nützlich sein:

Code:

button.onmousedown = (event) => {
        event.preventDefault();
};

pineapplefreak · 12. November 2017

Alles klar, habs gelöst.
Ich habs in Javascript so gelöst:

Code:

onfocus: function() {this.blur()}

Leider hat

Code:

onfocus: this.blur()

nicht funktioniert.

Bagbag · 12. November 2017

Sofern du da ein Ausschnitt aus einem Stück Code zeigst wie ich es glaube, dann kann letzteres natürlich nicht funktionieren, da du an das Property onfocus den Rückgabewert der Methode blur aus dem aktuellen Scope gibst (das vermutlich window ist) und undefined sein sollte.

Ich würde den button so erstellen:

Code:

const button = $('<button/>',
    {
        text: 'Klick',
        onfocus: () => button.blur()
    });

Physikbuddha · 14. November 2017

Von der Lösung möchte ich dir übrigens abraten.
Wie genau sollen denn Personen deine Webseite benutzen, wenn sie ausschließlich auf Tastatursteuerung setzen?

Stattdessen solltest du lieber den Focus-Style mit CSS so ändern, dass er dir gefällt und auch Personen mit Behinderung nicht von der Benutzung ausgeschlossen werden.

T0a5tbr0t · 17. November 2017

Einfach das "disabled" Attribut setzen. Damit sagt man "der Button hat keine Funktion".

pineapplefreak · 18. November 2017

Also, ich habe Maus und Tastatursteuerung gleichzeitig. Aber ich habe eigene Regeln für "Enter" fest gelegt.

Ist also kein Problem.

Disabled will ich den Button nicht machen, da er z.B. noch anklickbar sein soll.

Suche

JavaScript Button Focus deaktivieren

pineapplefreak

Lieutenant

Bagbag

Commodore

pineapplefreak

Lieutenant

Bagbag

Commodore

pineapplefreak

Lieutenant

Bagbag

Commodore

Physikbuddha

Lt. Commander

T0a5tbr0t

Lieutenant

pineapplefreak

Lieutenant

Ähnliche Themen