Browserzeile aus Tab-Kreislauf nehmen
henrik
- html
0 Steel0 LX- meinung
0 henrik- html
0 Der Martin0 henrik
Hallo,
ist es möglich, die Tabzeile des Browsers (und evlt. andere Buttons in der Toolbar des Browsers) aus dem "Tab-Kreislauf" zu nehmen, d.h. wenn man mittels TAB das letzte html-Element angewählt hat und nochmal TAB drückt, springt er in die Browserzeile. Das sollte er möglichst nicht, sondern optimalerweise auf das html-Element mit dem Tabindex "0".
danke
henrik
Hi!
Die Antwort ist ganz klar ein deutliches Jain!
Du kannst mit JavaScript beim Verlassen (onblur) des letzten Elements ein beliebiges Element deiner Seite focussieren (focus).
Du kannst mit JavaScript beim Verlassen (onblur) des letzten Elements ein beliebiges Element deiner Seite focussieren (focus).
Ich zitiere an dieser Stelle gerne RFC 1925, Satz 3:
"Mit ausreichendem Schub fliegen Schweine ganz wunderbar. Allerdings ist dies nicht notwendigerweise auch eine gute Idee. Es ist schwer, sicher zu sein, wo sie landen werden und es kann gefährlich sein, unter ihnen zu sitzen, während sie über einem fliegen."
Mit anderen Worten, die Antwort ist nicht etwa "Jain", sondern gleich ein doppeltes "Ja":
Ja, es ist technisch machbar, indem Du beim onblur des letzten Elements das erste fokussierst und
Ja, es ist nicht notwendigerweise auch eine gute Idee. Insbesondere sehbehinderte Nutzer, die vorwiegend mit der Tastatur arbeiten, werden dieses beabsichtigte Fehlverhalten Deiner Seite ausgesprochen ungnädig auffassen - und die Mehrzahl der Leute auf diesem Forum ebenfalls.
Gruß, LX
ich habe es mit onblur probiert, es fkt. bei mir aber nicht (Fokus springt in Browserzeile, obwohl FocusFirst() aufgerufen wird):
function FocusFirst() {
var elem = document.getElementById("outerDiv");
if (elem) elem.focus();
else
alert('wdwedw');
}
...
<div id="outerDiv" tabIndex="0"...
...
<asp:Button ID="buttShowTS" runat="server" onblur="FocusFirst()"...
...
Hallo,
ich habe es mit onblur probiert, es fkt. bei mir aber nicht (Fokus springt in Browserzeile, obwohl FocusFirst() aufgerufen wird)
du versuchst, den Focus auf ein div-Element zu setzen. Ein div ist aber ein Element, das keine interaktive Bedienung vorsieht, und kann daher nicht focussiert werden. Du musst schon konkret ein Formularelement oder einen Link angeben.
Ciao,
Martin
Hallo,
ich habe es mit onblur probiert, es fkt. bei mir aber nicht (Fokus springt in Browserzeile, obwohl FocusFirst() aufgerufen wird)
du versuchst, den Focus auf ein div-Element zu setzen. Ein div ist aber ein Element, das keine interaktive Bedienung vorsieht, und kann daher nicht focussiert werden. Du musst schon konkret ein Formularelement oder einen Link angeben.
Ciao,
Martin
ich habe es mit einem Input element probiert. Jetzt springt er aber vom Input Text-Element zum Button ELement.
Hier ist eine simpelste html-Seite:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" id='functions'>
function FocusFirst() {
var elem = document.getElementById("focusInput");
if (elem) elem.focus();
else
alert('wdwedw');
}
</script>
</head>
<body>
<input id="focusInput" tabIndex="0"/>
<input id="Button1" tabIndex="1" type="button" onblur="FocusFirst()" value="button" />
</body>
</html>
=>Was muss man ändern, damit der Tabfokus immer nur zwischen Text-Element und Button Element wechselt, ohne dazwischen in die Browserzeile zu wechseln ?
Gruß
henrik
Hi,
Hallo,
[...]
Ciao,
Martin
bitte zitiere anständig, kein TOFU! Danke.
ich habe es mit einem Input element probiert. Jetzt springt er aber vom Input Text-Element zum Button ELement.
Klar, du hast auch vergessen, die Eventbearbeitung als "erledigt" zu melden.
function FocusFirst() {
var elem = document.getElementById("focusInput");if (elem) elem.focus();
else
alert('wdwedw');
}
[...]
<input id="focusInput" tabIndex="0"/>
<input id="Button1" tabIndex="1" type="button" onblur="FocusFirst()" value="button" />
Beim ersten input-Element fehlt noch type="text".
=>Was muss man ändern, damit der Tabfokus immer nur zwischen Text-Element und Button Element wechselt, ohne dazwischen in die Browserzeile zu wechseln ?
Sobald der Button den Fokus verliert, setzt du ihn erstmal auf das Textfeld. Und dann kommt noch die Standard-Eventbearbeitung des Browsers, die feststellt: Oh, Tab-Taste gedrückt, also Focus um ein Element weitersetzen. Diese Standardaktion musst du unterdrücken, indem dein Eventhandler false zurückgibt und so signalisiert: Fertig, keine weitere Aktion nötig.
Hast du schon mal darüber nachgedacht, was bei Shift-Tab auf dem ersten input-Element passiert?
Eben, nichts. Das heißt, die normale Browser-Reaktion, der Focus wechselt auf die Adressleiste.
Hast du schon mal darüber nachgedacht, was bei Shift-Tab auf dem letzten input-Element passiert?
Genau, der Focus wechselt auf das erste input-Element, nicht auf das vorhergehende (bei nur zwei Inputs ist das dasselbe, bei drei schon nicht mehr).
So long,
Martin
Hallo,
ich habe die Änderungen ausprobiert(type="text" und "return false" in der FocusFirst() -Methode), jedoch:
Hat das Textfeld den Fokus, springt er bei TAB in die Adresszeile.
(vom Button springt er wie gewünscht auf das Textfeld)
Bei SHIFT+TAB wechselt er immer nur zwischen Button und Textfeld.
Noch ne Idee ?
Henrik
Hat das Textfeld den Fokus, springt er bei TAB in die Adresszeile.
(vom Button springt er wie gewünscht auf das Textfeld)
Bei SHIFT+TAB wechselt er immer nur zwischen Button und Textfeld.Noch ne Idee ?
Für mich sieht das nach einem Bug bezüglich tabindex aus. Wenn du den Wert rausnimmst funktioniert es weitestgehend. Nur im IE 8 musst du noch vorher dem Fenster den Focus geben. Da ältere Firefox auch Probleme damit haben unmittelbar nach dem blur anderen Elementen den focus zu geben, solltest du ausserdem noch einen Timeout einbauen.
<!doctype html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
function FocusFirst() {
var elem = document.getElementById("focusInput");
if (elem) window.setTimeout( function() { window.focus(); elem.focus(); }, 1);
return false;
}
</script>
<input id="focusInput">
<input >
<input>
<input type="button" onblur="FocusFirst()" value="button">
</body>
</html>
Struppi.
danke, jetzt funktioniert es!