humans.txt

Humans txt

Ist keine Erfindung von mir. Sondern ein Projekt, um die Menschen hinter einer Webseite kennen zu lernen. Hier die Projektseite von humans.txt

Team

Chef: Rocco Wernicke
Contact: r.wernicke-schleswig[at]email.de
From: Deutschland

Site

Last update: 2015/03/10
Language: Deutsch
Doctype: HTML5
TECHNOLOGY: Html5, Css3, jQuery, Modernizr
IDE & Software: Sublime Text, Notepad++, Netbeans, PhpStorm, FileZilla, Gimp
 
Ansicht
Sie befinden sich definitiv hier: [ zur Startseite ]Pages » Tutorial »

Sidebar Open Mediaquerie anzeigen

Counter für Input oder Textfeld Teil 2


Motivation

Hier folgt der zweite Teil unseres Tutorials einen Counter für Input oder Textfeld zu programmieren.

siehe auch

Wer den ersten Teil noch nicht kennt, sollte diesen unbeding vorher lesen, da er die Voraussetzungen für den zweiten Teil bildet. Erster Teil zum ersten Teil

Schlüsselworte

Counter

Um unsern Counter flexibler zu gestalten biete es sich an, diesen in eine Funktion zu stecken. Wir wissen, dass wir den Counter an ein Input oder Textarea binden wollen. Wir benötigen noch eine Möglichkeit, irgendwo Fehler auszugeben und natürlich die Anzeige für die aktuelle Anzahl der eingegebenen Zeichen.

Ich gehe hier so vor, dass ich für die Ausgabe von Fehlern ein Span-Tag nutze, ebenso für den Counter selber. Damit ich diese Tags nicht jedesmal im Html setzen muss, wird mir jQuery diese erzeugen, wenn die Seite geladen ist. Der User bekommt diese erst zu sehen, wenn das entsprechende Input oder Textarea den focus erhält

jQuery-Code

Komemn wir zur Umsetzung, dazu betrachten wir mal folgenden Code.

view code

var Counter = function(el, input, iMax, Msg)
{

  var div = el.find('div').attr("data-counter", "count");
  
  input.focus(function()
  {
    var sSpanCounter = $('<span class="counter"></span>').appendTo(div.data("data-counter", "count"));
    var sSpanErr = $('<span class="error"></span>').appendTo(div.data("data-counter", "count"));

    input.keyup(function()
    {
      sSpanCounter.text(input.val().length);

      if (input.val().length > iMax)
      {
        sSpanErr.show('slow').text(Msg);
        sSpanCounter.hide();
      }

      if (input.val().length <= iMax)
      {
        sSpanCounter.show().text(input.val().length);
        sSpanErr.hide();
      }

      if (input.val() == ' ')
      {
        sSpanCounter.hide();
        sSpanErr.hide();
      }
    });
  });

  input.focusout(function()
  {
    sSpanCounter.remove();
    sSpanErr.remove();
  });
}


$(document).ready(function()
{
  var el = $('.example');
  var input = $('#countertest');
  var iMax = 10;
  var Msg = 'Es sind max.[' + iMax + '] Zeichen erlaubt.';

  Counter(el, input, iMax, Msg);

});

Um den Counter zu testen habe ich hier ein Eingabefeld eingefügt. Geben wir einmal ein paar Buchstaben ein und sehen was passiert.

Example

In Zeile eins deklarienen wir unsern Counter als Funktion mit den benötigten Variablen. Damit der Span-Tag mit der class counter auch erstellt wird, benötigen wir einen Einstiegspunkt. In meinen Beispiel erreichen wir den Punkt, wenn unser Input den Focus erhält. Verliert unser Input den Focus wieder, werden beide Span-Elemente wieder entfernt (siehe Zeile 35). Auch andere Szenarien sind denkbar.

var div = el.find('div').attr("data-counter", "count");

In der oberen Zeile definieren wir unser div - Element. el ist ein nicht bekannter Tag. Im Example habe ich den counter an diese Box geheftet. Findes dieses Element einen div-tag, setzen wir in diesen das data-Attribut. Und nutzen diesen Bereich, um die Span Tags zu erstellen (siehe unten.)

var sSpanCounter = $('<span class="counter"></span>').appendTo(div.data("data-counter", "count"));
var sSpanErr = $('<span class="error"></span>').appendTo(div.data("data-counter", "count"));