Html5 Placeholder für IE < 10

Eine verbreitete Frage in Kursen in letzter Zeit ist die Frage, wie man das Html5-Attribut “Placeholder” in “älteren” Browsern implementiert. Was sind Placeholder? Allgemein auch als Platzhalter oder “Wassermarker” bekannt.

PlaceHolderPlaceholderFocus

Wenn das Eingabefeld den Focus bekommt, verschwindet der “Hinweistext”.

Das Markup lautet in diesem Beispiel:

   1:  <input type="email" placeholder="Bitte eine Email Adresse eingeben!" style="width:250px;" />
   2:  <textarea placeholder="Bitte eine Nachricht eingeben!" style="width:250px;" rows="5"></textarea>
 

Alle neuen modernen Browser können dies von Haus aus. Das Problem liegt im Internet Explorer.

Version 9 und kleiner unterstützen dieses Placeholder-Attribut nicht. Mit Hilfe der Modernizr und JQuery-Bibliotheke kann Abhilfe geschaffen werden. (auch mit nuget in VS 2012 verfügbar)

Als erstes müssen die Referenzen zu den beiden Bibliotheken gesetzt werden

   1:  <!DOCTYPE html>
   2:  <html>
   3:  <head>
   4:      <meta charset="utf-8">
   5:      <title>Placeholder in Html 5</title>
   6:      <script src="Scripts/modernizr-2.6.2.js"></script>
   7:      <script src="Scripts/jquery-1.10.2.js"></script>
   8:  </head>

WICHTIG! Nicht die Version 2.0.X verwenden, weil diese im Internet Explorer 6-8 nicht unterstützt werden

Mit Modernizr kann man überprüfen, ob Placeholder vom Browser unterstützt werden.

Der fertige Seite mit Kommentaren:

   1:  <!DOCTYPE html>
   2:  <html>
   3:  <head>
   4:      <meta charset="utf-8">
   5:      <title>Placeholder in Html 5</title>
   6:      <script src="Scripts/modernizr-2.6.2.js"></script>
   7:      <script src="Scripts/jquery-1.10.2.js"></script>
   8:  </head>
   9:  <body>
  10:      <form name="myForm">
  11:      <div>
  12:          <p>Email:</p>
  13:          <p>
  14:          <input type="email" placeholder="Bitte eine Email Adresse eingeben!" style="width:250px;" />
  15:          </p>
  16:      </div>
  17:      <div>
  18:          <p>Nachricht:</p>
  19:          <p>
  20:          <textarea placeholder="Bitte eine Nachricht eingeben!" style="width:250px;" rows="5"></textarea>
  21:          </p>
  22:      </div>
  23:      <br />
  24:      <input type="submit" value="senden" />
  25:      </form>
  26:      <script>
  27:          //Wenn Dokument geladen
  28:          $(document).ready(function () {
  29:              //Wenn Placeholder im Browser nicht unterstützt werden
  30:              if (!Modernizr.input.placeholder) {
  31:   
  32:                  //Auswahl input oder textarea - Feldern gibt es Placeholder
  33:                  $("input[placeholder], textarea[placeholder]").focus(function () {
  34:                      //Aktuelles Input-Feld, welches den Focus gerade hat
  35:                      var input = $(this);
  36:   
  37:                      //Wenn Eingabe gleich Placeholder-Wert => Input-Feld leeren
  38:                      if (input.val() == input.attr("placeholder")) {
  39:                          input.val("");
  40:                      }
  41:   
  42:                  }).blur(function () { //Beim "verlassen" des Feldes
  43:                      var input = $(this);
  44:   
  45:                      /* Falls Feld leer oder identisch mit Wert in Placeholder
  46:                          => Placeholder-Wert einsetzen */
  47:                      if (input.val() == "" || input.val() == input.attr("placeholder")) {
  48:                          input.val(input.attr("placeholder"));
  49:                      }
  50:                  }).blur(); /* Initial-Aufruf, damit beim Laden des
  51:                  Dokuments die Placeholder gesetzt werden */
  52:              }
  53:          });
  54:      </script>
  55:  </body>
  56:  </html>

und siehe da, Internet Explorer versteht Placeholder Smiley

Kommentare sind geschlossen