Seite 1 von 2 12 LetzteLetzte
Ergebnis 1 bis 15 von 17
Like Tree1Likes

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

  1. #1
    j-l-n Guest

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

    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-Code:
    <!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>
    Geändert von j-l-n (30-09-2014 um 20:00 Uhr) Grund: Codeverbesserung
    mikdoe likes this.

  2. #2
    tsseh ist offline Foren-Gott
    registriert
    19-05-2008
    Beiträge
    5.667

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


  3. #3
    j-l-n Guest

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

    Hesst, ich kenne Modernizr und weiß, dass es Framworks wie html5shiv gibt, wollte das aber ganz bewusst ohne machen...

  4. #4
    tsseh ist offline Foren-Gott
    registriert
    19-05-2008
    Beiträge
    5.667

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

    Zitat Zitat von Julian Beitrag anzeigen
    Hesst, ich kenne Modernizr und weiß, dass es Framworks wie html5shiv gibt, wollte das aber ganz bewusst ohne machen...
    und ich ganz bewusst noch ergenzen, dass es da was fertiges, 1000fach erproptes als quasistandard gibt

  5. #5
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.751

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

    Auch eine <textarea> kann ein autofocus haben... und bei einem Shiv würde ich noch einen .attachEvent()- und onload-Fallback reinbauen.

  6. #6
    j-l-n Guest

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

    done.

  7. #7
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.751

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

    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.

  8. #8
    j-l-n Guest

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

    Zitat Zitat von kkapsner Beitrag anzeigen
    Hm... jetzt bekommt noch das falsche Element den Fokus, wenn mehrere Elemente ein autofocus-Attribut haben.
    Ja, das war mir bewusst - hab' jetzt aber noch ein break eingebaut...

    - - - Aktualisiert - - -

    Übrigens thematisch passend: Cursor-Position nach Autofokus im Textfeld setzen

  9. #9
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.751

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

    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

  10. #10
    j-l-n Guest

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

    Zitat Zitat von kkapsner Beitrag anzeigen
    Wenn davor noch ein <textarea> mit autofocus ist, sollte dieses den Fokus bekommen.
    Wusste gar nicht, dass das vom Browser so gehandhabt wird. Aber das ging ja schnell auszubessern - ebenfalls erledigt.

    Zitat Zitat von kkapsner Beitrag anzeigen
    Ich weiß, ich nerve
    Nö, wir sind, glaube ich, alle dankbar für deine Tipps und Verbesserungsvorschläge - also ich auf jeden Fall

  11. #11
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.751

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

    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

    Zitat Zitat von Julian Beitrag anzeigen
    also ich auf jeden Fall
    Dann ist's ja gut.

  12. #12
    j-l-n Guest

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

    Zitat Zitat von kkapsner Beitrag anzeigen
    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.
    Stimmt.
    Ebenfalls behoben.

  13. #13
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.751

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

    Jetzt sieht's nicht schlecht aus. Mir war gar nicht so klar, dass der IE8 document.querySelectorAll() schon implementiert hatte.

  14. #14
    j-l-n Guest

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

    Zitat Zitat von kkapsner Beitrag anzeigen
    Mir war gar nicht so klar, dass der IE8 document.querySelectorAll() schon implementiert hatte.
    Ich war auch etwas erstaunt. Aber anscheinend ist die Unterstützung im IE8 auch etwas limitiert, wenn es um CSS3 geht...

  15. #15
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.751

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

    IE8 kann hald eigentlich nur CSS 2.1...

Seite 1 von 2 12 LetzteLetzte

Ähnliche Themen

  1. HTML5 - Was kann mein Browser alles?
    Von mikdoe im Forum allgemeine Diskussionen und News zu Themen rund ums Internet
    Antworten: 4
    Letzter Beitrag: 29-06-2014, 15:09
  2. History Api mit Fallback
    Von RobbyBubble im Forum JavaScript
    Antworten: 2
    Letzter Beitrag: 09-02-2014, 16:40
  3. Mobile HTML5 App, Browser Probleme
    Von PhilippHToner im Forum JavaScript
    Antworten: 1
    Letzter Beitrag: 22-09-2012, 22:15
  4. jquery fallback in css definieren?
    Von mario_blank im Forum JavaScript
    Antworten: 1
    Letzter Beitrag: 28-09-2009, 19:15
  5. Antworten: 12
    Letzter Beitrag: 08-11-2006, 17:13

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •