HTML5 Problem: tabindex und autofocus bei Safari/Chrome

DEDEX7200Pro · 11. September 2010

Hallo Leute, ich habe ein Problem mit Tabindex, sobald ich ein Feld (egal ob das Feld mit Tabindex="1" oder Tabindex="2" läuft). Mein Script ist aber meines Wissens korrekt. Firefox 4 Beta, selbst Flock, Opera und IE8 akzeptieren dies. Wenn ich jedoch den Autofocus entferne, dann geht es. Da ich ein Suchfeld für eine Suche auf meiner privaten Homepage mache, wäre es gut, dass wenn man die suche.php öffnet, gleich seinen Suchbegriff eingeben könnte.

Hier mein Code (habs aus meiner CMS, deshalb <module:XX>)

HTML:

<!DOCTYPE html>
<html>
<head lang="de">
	<meta charset="utf-8">
	<title><module:maintitle></title>
	<module:style>
	<script>
    document.createElement("article");  
    document.createElement("footer");  
    document.createElement("header");  
    document.createElement("hgroup");  
    document.createElement("nav");  
    document.createElement("menu");
	</script>
	<!--[if IE]>
	<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
</head>
<body>
<header>
<a tabindex="14" href="#">Registrieren</a>
<a tabindex="15" href="#">Anmelden</a>
</header>
<section id="main">
<section id="logo">
<a href="#"><img src="<module:imageurl>logo.gif" width="275" height="61"/></a>
</section>
<nav>  
    <ul>
        <li><a href="?site=main">Home</a></li>
        <li><a href="?site=search">Suche</a></li>
	</ul>
</nav>
<section id="ebene">
<FORM action="search.php" name="s">
<input type="text" name="search" size="50" tabindex="1" placeholder="Bitte geben Sie einen Suchbegriff ein..." required autofocus>
<input type="submit" tabindex="2" value="Suchen">
</FORM>
</section>
<section id="copyright">
&copy; <module:maintitle> <module:year>
</section>
</section>
<footer>
Hier mein Footer ohne Inhalt^^
</footer>
</body>
</html>

Meine Css und so muss ich ja nicht mitsenden^^ Ist kein stylisches Problem. Im übrigen könnt ihr die 2 Javascripts in eure HTML5-Datei laden und dann in eurer Style.css folgenden Eintrag machen, damit eure Seite auch mit nicht HTML5-Browsern (z.B. Firefox 3.6 oder älter) kompaibel ist.

Style.css-Eintrag:

Code:

header,footer,article,section,nav,menu,hgroup{display:block}

Edit: Hab den Code-Tag falsch gesetzt^^ Und nun hab ich eine Lösung; zwar nicht so schön, aber sie funktioniert:

ich hab

Code:

<body>

mit

Code:

<body onload="focus()">

ersetzt und hab in den head-bereich folgenden javascript eingefügt:

Code:

<script>function focus(){document.s.search.focus();}</script>

HTML5 Problem: tabindex und autofocus bei Safari/Chrome

DEDEX7200Pro

Neue Beiträge