fr@gma: HTML Tabindex Fokus im Internet Explorer

SELF-Forum

HTML Tabindex Fokus im Internet Explorer

fr@gma
– Informationen zu den Bewertungsregeln

Hallo, ich habe <li>-Elemente mit tabindex="-1", da ich auf den Fokus mit CSS reagieren möchte. Klickt man im Internet Explorer (9, 10, 11) auf ein Kindelement des <li>-Elements, wird das <li>-Elemente nicht fokussiert. In allen anderen Browsern funktioniert es wie gewünscht.

Gibt es irgendeinen 'Trick' das Problem zu umgehen (ohne Javascript!) ? Vielen Dank schon mal.

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. HTML Tabindex Fokus im Internet Explorer

    Felix Riesterer Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Liebe(r) fr@gma,

    ich habe <li>-Elemente mit tabindex="-1",

    mir ist nicht bekannt, dass man ein <li> mittels tabbing fokussieren könnte. Du bräuchtest darin ein fokussierbares Element wie <a>, <label>, <input> oder <button>.

    In allen anderen Browsern funktioniert es wie gewünscht.

    Das halte ich für einen (vielleicht wünschenswerten) Zufall. Aber ich kann mich (wie so oft) irren...

    Liebe Grüße,

    Felix Riesterer.

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. HTML Tabindex Fokus im Internet Explorer

      Rolf b
      – Informationen zu den Bewertungsregeln

      Hallo,

      doch doch, laut Standard HTML5 7.4.1 ist das durchaus erlaubt. Die Frage ist nur, was passiert, wenn das <li> Element Kind-Elemente enthält die selbst focus-sierbar sind. Der Focus ist ein Highlander, es kann nur einen geben, und wenn ein <li> beispielsweise eine Textbox enthält, dann bekommt die eventuell den Focus.

      Der CSS Standard erzählt bei :hover etwas davon, dass ein Element den :hover-Status bekommen kann wenn die Ratte über einem seiner Kind-Elemente schwebt, aber in diesem Satz ist von :focus nicht die Rede.

      Versuche es doch mal mit 2 CSS Regeln (bin jetzt nur am Tablet, da macht fiddle keinen Spaß, drum probier ich es nicht selbst), um zu sagen: Hover über li oder über irgendeinem Kind dieses li.

      li:hover, li *:hover {
}

      Gruß Rolf

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

    2. HTML Tabindex Fokus im Internet Explorer

      Gunnar Bittersmann Homepage des Autors (Versionen)
      – Informationen zu den Bewertungsregeln

      @@Felix Riesterer

      ich habe <li>-Elemente mit tabindex="-1",

      mir ist nicht bekannt, dass man ein <li> mittels tabbing fokussieren könnte.

      Man kann so ziemlich jedes Element per Tab fokussierbar machen; eben mit dem tabindex-Attribut. Allerdings mit nichtnegativen Werten. Vorzugsweise 0, um die Tab-Reihenfolge nicht durcheinanderzubringen.

      Du bräuchtest darin ein fokussierbares Element wie <a>, <label>, <input> oder <button>.

      label ist per default nicht fokussierbar. Es ergibt auch i.d.R. keinen Sinn, das zu ändern.

      In allen anderen Browsern funktioniert es wie gewünscht.

      Was immer da fokussiert wird, ein li-Element ist es bestimmt nicht.

      Genaueres lässt sich ohne Link zur Seite oder wenigsten relevanten Quelltext natürlich nicht sagen.

      LLAP 🖖

      --
      “You might believe there are benefits for the developer, but first of all, you should put those behind the interest of the user.” —Stefan Tilkov
      Selfcode: sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. HTML Tabindex Fokus im Internet Explorer

        fr@gma
        – Informationen zu den Bewertungsregeln

        Hallo, vielen Dank für Eure Antworten. Habe hier nochmal ein Beispiel erstellt:

        <!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<style>
	ul {
		display: table;
	}
	ul li {
		position: relative;
		display: table-cell;
		width: 100px;
		height: 30px;
		border: 1px solid #CCC;
		outline: none;
	}
	ul li ul {
		display: none;
		height: 100px;
		background-color:#CCC;
	}
	ul li ul li {
		display: block;
	}
	ul li:focus ul, ul li div:focus + ul, ul li ul:hover {
		display: block;
		position: absolute;
		top: 30px;
		left: 0;
	}
	a, div {
		display: block;
		width: 100%;
		height: 100%;
	}
</style>
</head>

<body>
    <ul>
      <li><a href="test01.html">blah</a></li>
      <li tabindex="0">
            <div>blah</div>
            <ul>
                <li><a href="test02.html">blahblah</a></li>
                <li><a href="test03.html">blahblah</a></li>
            </ul>
        </li>
      <li><a href="test04.html">blah</a></li>
    </ul>
</body>
</html>

        Tabindex="0" ist wirklich besser.

        Habe jetzt nochmal etwas herumprobiert. Erreichen möchte ich ein Untermenü, dass bei Klick (auch ohne Script) sichtbar wird. Funktioniert auch alles wunderbar, außer wie gesagt im InternetExplorer. Der IE setzt den Fokus offenbar auf das Element, welches tatsächlich geklickt wurde (im Beispiel das DIV), deshalb funktioniert das Beispiel nur durch:

        ul li div:focus + ul

        Leider nutzt mir das herzlich wenig, da ich im DIV-Element noch ein Kindelement verwende. Von diesem Element aus kann ich die verschachtelte Liste aber ja nicht mehr ansprechen. Ich werde es aber trotzdem so verwenden + Javascript für eine komfortablere Nutzung (wollte eben nur, dass die Navigation auch ohne JS nutzbar bleibt).

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln