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 1

Motivation:

Häufig steht man vor der Frage, die Anzahl der Zeichen in eine Input bestimmen zu können. Anwendungsfälle sind bspw. ein Eingabefeld für den Betreff, hier ist es wünschenswert, kurze Informationen zu erhalten, eine ander Möglichkeit die Länge eines Textfeldes zu bestimmen können Eingaben für Plz oder Telefonnummern sein.

Schlüsselworte

Um die Anzahl der Zeichen in einen Eingabefeld zu ermitteln nutzen wir die Funktion keyup() und binden diese an das betreffende Textfeld. Die Anzahl der Zeichen in einen Textfeld ermitteln wir mit Hilfe von length. Der Html-Code könnte so aussehen:

      

    

Machen wir uns an den jQuery-Code

$(document).ready(function()
{
  var input = $("#CountInput");
  var counter = $(".counter");
  
  Input.keyup(function()
  {
    counter.text(input.val().length);
  });
});

Nun ist diese kleine Funktion noch nicht so flexibel. Im nächsten Schritt erweitern wir unsere Funktion um ein paar kleine Feinheiten. Ein erster Schritt besteht darin, auf ein frei zu wählende maximal Zeichenlänge zu ermitteln. Ist diese überschritten, soll uns ein vorher festgelegter Fehlerbereich angezeigt werden, um eine entsprechende Medlungn anzuzeigen. Dazu erweiter wir unseren Html-Code um ein weiteres span-tag mit der class errorMsg und erweitern unsern jQuery-Code folgendermaßen.

$(document).ready(function()
{
  //Variablen festlegen  
  var iMax = 20;
  var MsgError = 'Es sind nur [' + iMax + ' ] Zeichen erlaubt.';
  var input = $("#CountInput");
  var counter = $(".counter");
  var spanerror = $(".errorMsg"); 
 
  //Span fuer die Errormeldung verbergen
  spanerror.hide(); 
 
  input.keyup(function()
  {
    counter.text(input.val().length);
    
    //wurde etwas eingegeben
    if(input.val() == "")
    {
      //input ist leer, span verbergen
      spanerror.hide();   
    }

    //es sind zuviele Zeichen, Fehlermeldung anzeigen
    if(input.val() > iMax)
    {
      spanerror.text(MsgError).show();
    }

    //die Anzahl der Zeichen ist kleiner iMax oder gleich wie iMax
    if(input.val() <= iMax)
    {
      spanerror.hide();
    }

  });
});
Weiter zum zweiten Teil