Machen Sie ein HTML-Element nicht fokussierbar

Ist es möglich, ein HTML-Element nicht fokussierbar zu machen ?

Ich verstehe, dass eine Liste von Elementen definiert werden kann, die den Fokus erhalten können, und dass ein Benutzer durch Drücken einer TabTaste durch diese Elemente navigieren kann . Ich sehe auch, dass es an dem Browser liegt, dies zu kontrollieren.

Aber vielleicht gibt es eine Möglichkeit, bestimmte Elemente nicht fokussierbar zu machen. Angenommen, ich möchte, dass ein Benutzer ein bestimmtes <a>Tag überspringt, wenn er a drückt Tab.

<a href="http://foo.bar" tabindex="-1">unfocusable</a>

Ein negativer Wert bedeutet, dass das Element fokussierbar sein sollte, aber nicht über die sequentielle Tastaturnavigation erreichbar sein sollte.

Siehe auch: developer.mozilla.org

Um den Fokus nicht nur bei Verwendung der tabSchaltfläche vollständig zu verhindern , legen Sie ihn disabledals Attribut in Ihrem HTML-Element fest.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<input class="form-control" type="text"> Click this, you can see it's focusable.

<input class="form-control" type="text" readonly>  Click this, you can see it's focusable.

<input class="form-control" type="text" readonly tabindex="-1">  Click this, you can see it's focusable. Not tab'able.

<input class="form-control" type="text" disabled>  Click this, you can see it's <strong>not</strong> focusable.

Um zu verhindern, dass ein Element den Fokus erhält ("nicht fokussierbar"), müssen Sie Javascript verwenden, focusum die Standardinteraktion zu überwachen und zu verhindern.

Verwenden Sie tabindex=-1Attribut, um zu verhindern, dass ein Element mit Registerkarten versehen wird.

Durch Hinzufügen tabindex=-1wird jedes Element fokussierbar, auch divElemente. Das heißt, wenn ein Benutzer darauf klickt, erhält er je nach Browser wahrscheinlich eine Fokusübersicht.

Idealerweise möchten Sie Folgendes:

function preventFocus(event) {
  event.preventDefault();
  if (event.relatedTarget) {
    // Revert focus back to previous blurring element
    event.relatedTarget.focus();
  } else {
    // No previous focus target, blur instead
    event.currentTarget.blur();
  }
}

/* ... */

element.setAttribute('tabindex', '-1');
element.addEventListener('focus', preventFocus);

TabIndex ist genau das, wonach Sie suchen: http://www.w3schools.com/jsref/prop_html_tabindex.asp .

Wenn Sie einen tabIndex-Wert auf -1 setzen, überspringen Sie ihn beim Durchblättern Ihres Formulars.

Ich habe verwendet focusable="false", weil tabindex="-1"nicht im IE gearbeitet hat.

Für das Element, auf das Sie sich nicht konzentrieren möchten, müssen Sie den Tabindex als negativen Wert eingeben.

Ohne JavaScript ist es nicht möglich, ein standardmäßig fokussierbares HTML-Element nicht fokussierbar zu machen.

Nachdem ich mich mit fokusbezogenen DOM-Ereignissen befasst habe, habe ich die folgende Implementierung entwickelt (basierend auf der Antwort von @ ShortFuse , aber einige Probleme und Randfälle behoben):

    // A focus event handler to prevent focusing an element it attached to
    onFocus(event: FocusEvent): void {
        event.preventDefault();

        // Try to remove the focus from this element.
        // This is important to always perform, since just focusing the previously focused element won't work in Edge/FF, if that element is unable to actually get the focus back (became invisible, etc.): the focus would stay on the current element in such a case
        const currentTarget: any | null = event.currentTarget;
        if (currentTarget !== null && isFunction(currentTarget.blur))
            currentTarget.blur();

        // Try to set focus back to the previous element
        const relatedTarget: any | null = event.relatedTarget;
        if (relatedTarget !== null && isFunction(relatedTarget.focus))
            relatedTarget.focus();
    }

   // Not the best implementation, but works for the majority of the real-world cases
    export function isFunction(value: any): value is Function {
        return value instanceof Function;
    }

Dies ist in TypeScript implementiert, kann jedoch leicht für einfaches JavaScript angepasst werden.

Ich habe gerade den YouTube-Quellcode gelesen. Ich sehe focusable = "false".

<svg xmlns="https://www.w3.org/2000/svg" focusable="false" aria-label="" fill="#4285F4" viewBox="0 0 24 24" height="24" width="24" style="margin-left: 4px; margin-top: 4px;"><path d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"></path></svg>

Ist das eine richtigere Antwort?