Contaos Registrierungsformular mit Platzhaltern ("placeholder") ausstatten

von Oliver Richter

input-Felder wurden mit Platzhaltern (Inhalt der Label) ausgestattet
Bild: Labels wurden entfernt und die Platzhalter für jedes Eingabefeld eingestellt

Das Contao-Registrierungsformular bietet, meines Wissens nach, leider (noch?) keine Möglichkeit (Stand Januar 2014) bei Verwendung der HTML5-Ausgabe die dortigen Input-Felder mit Platzhaltern (Attribut "placeholder") auszustatten wie das mittlerweile im Formulargenerator von Contao möglich ist.

Einer meiner Kunden benötigte jedoch ein Registrierungsformular, in dem die Label-Elemente ausgeblendet und die Input-Felder mit einem Platzhalter-Wert (der dem des Labels entspricht) ausgestattet sind.

Dazu habe ich ein kleines Javascript auf JQuery-Basis eingesetzt was hier Abhilfe schafft und beide Probleme löst. Die in den Label-Elementen vorhandenen SPAN-Tags (Angabe "Pflichtfeld" und das Stern-Zeichen) werden vor dem Übertragen des Label-Wertes in das Input-Platzhalter-Feld noch entfernt.

 

$('.mod_registration input.text').each(function() 
 {
  $this = $(this);
  
  $label = $('label[for="'+ $this.attr('id') +'"]');
  
  if ($label.length > 0 ) 
   {  
    // Labels ausblenden
    $label.addClass('invisible');
    
    // SPAN-Tags im Label-HTML-Content entfernen
    $label.find('span').remove();
    
    // INPUT-Felder mit placeholder-Attribut ausstatten
    $this.attr('placeholder', $label.text() );
   }
 });

Kommentare

Einen Kommentar schreiben

Bitte rechnen Sie 2 plus 5.

Sie befinden Sich in der Detailansicht eines Blog-Eintrags.

Um alle Blog-Einträge zu sehen, wechseln Sie bitte zur Nachrichten-Übersicht.