HTML5 Autofocus mit Fallback für nicht unterstützende Browser

J

j-l-n

Guest
In HTML5 gibt es einige nützliche Attribute, wie zum Beispiel autofocus. Dadurch setzt der Browser automatisch den Fokus auf ein Eingabefeld - auch wenn JavaScript deaktiviert ist.
Da ich mittlerweile viele Neuerungen aus HTML5 aktiv nutze, habe ich für Browser, die dies noch nicht unterstützen, eine kleine Lösung mit einem JS-Fallback gebastelt:
HTML:
<!doctype html>
<html>
  <head>

    <meta charset="UTF-8">
    <title>Autofocus</title>

    <script>    
      if(document.addEventListener){  
        document.addEventListener("DOMContentLoaded", setAutofocus);
      }
      else if(document.attachEvent){
        document.attachEvent("onload", setAutofocus)
      }

      function setAutofocus(){
        var input = document.createElement("input");
        var supportsAutofocus = "autofocus" in input;
        if(supportsAutofocus !== true){
          var element = document.querySelectorAll("textarea[autofocus], input[autofocus]")[0];
          if(element){
            element.focus();
          }
        }
      }
    </script>

  </head>

  <body>
    <input type="text" autofocus>
  </body>

</html>
 
Zuletzt bearbeitet:
Hesst, ich kenne Modernizr und weiß, dass es Framworks wie html5shiv gibt, wollte das aber ganz bewusst ohne machen...
 
Auch eine <textarea> kann ein autofocus haben... und bei einem Shiv würde ich noch einen .attachEvent()- und onload-Fallback reinbauen.
 
Hm... jetzt bekommt noch das falsche Element den Fokus, wenn mehrere Elemente ein autofocus-Attribut haben. Das ist zwar dann invalides HTML, kann aber ja mal schnell passieren, wenn man mehrere Formulare auf einer Seite anzeigen will. Auch sind sich die Browser da auch einig, dass dann das erste Element den Fokus bekommt. Bei dir ist es die letzte <textarea> oder das letzte <input>, wenn kein <textarea> ein autofocus hat.
 
Jetzt wird aber das erste <input> mit autofocus markiert. Wenn davor noch ein <textarea> mit autofocus ist, sollte dieses den Fokus bekommen.

PS: Ich weiß, ich nerve ;)
 
Jetzt ist das Problem genau anders herum. Es wird immer die erste Node, die ein autofocus hat fokusiert - egal ob das ein <input> oder eine <textarea> ist. Du musst also das erste <input> mit autofocus und die erste <textarea> mit autofocus bestimmen und dann schauen, welches zuerst im DOM vorkommt. Kannst dir ja mal anschauen, wie ich das gemacht hab': http://kkjs.kkapsner.de/modules/kkjs.html5.js

also ich auf jeden Fall
Dann ist's ja gut.
 
Hm, hier stimm ich dir nur mit Betonung auf das „mal” zu. Wenn es aber um elementare, wichtigere Funktionen geht, muss man ihn weiterhin unterstützen (auch wenn ich da liebend gern drauf verzichten könnte :beaten:), und zwar aus dem Grund, dass es leider die letzte IE-Version für XP war. Und tot ist er auch noch lange nicht: The Internet Explorer 8 Countdown
 
Zurück
Oben