Wer über das Internet eine SMS schickt kennt es auf jeden Fall. Diese Zähler, die einem immer sagen, das man noch so und so viele Zeichen verwenden kann. So weden diese Zähler mit JavaScript verwirklicht.

Es gibt Formulare die eine Begrenzung in der Eingabe haben. Die Eingabe von SMS ist beispielsweise meistens auf 100 - 150 Zeichen begrenzt. Ein kleines JavaScript zählt die eingegebenen Zeichen in ein Textfeld, und gibt die Zahl der Zeichen, die noch verwendet werden können, aus.

Live Demo

<script language="JavaScript">

function CheckLen(Target)
{
var maxlength = "150"; //die maximale Zeichenlänge

StrLen=Target.value.length;

if (StrLen==1&&Target.value.substring(0,1)==" ")
{
Target.value="";
StrLen=0;
}
if (StrLen>maxlength )
{
Target.value=Target.value.substring(0,maxlength);
CharsLeft=0;
}else
{
CharsLeft=maxlength-StrLen;
}
document.zaehlformular.Anzahl.value=CharsLeft;
}

}

</script>

Das zugehörige Formular mit einem Textfeld:

<FORM name="zaehlformular">

<B>Sie haben noch:
<INPUT readOnly maxLength="3" size="3" name="Anzahl"> Zeichen</B><BR>
<TEXTAREA onkeydown="CheckLen(this)" onkeyup="CheckLen(this)" onfocus="CheckLen(this)" rows="5" wrap="virtual" cols="35" onchange="CheckLen(this)"></TEXTAREA>

</FORM>

Das Skript spricht das Formular an.
In der ersten Zeile der Funktion wird die Zahl der maximal verwendbaren Zeichen definiert. In dem Beispiel sind 150 Zeichen gewählt worden.
Die Funktion wird bei jedem Tastendruck durch die Eventhandler "onkeydown" und "onkeyup" aufgerufen, sodass jeder Tastendruck ermittelt wird, und die Zahl der zu Verfügung stehenden Zeichen automatisch erneuert wird. Die Anzahl der noch zur Verfügung stehenden Zeichen wird über das Eingabefeld ausgegeben. Hierbei ist es wichtig, das es das name="Anzahl" - Attribut behält, da es sonst nicht mehr korrekt vom Skript angesprochen wird. Ebenfalls wichtig ist es, das dass name - Attribut beim Formular-Tag erhalten bleibt, da es auch in diesem Fall nicht mehr richtig angesprochen würde.

Wollen Sie das Skript anstatt auf ein Textfeld auf ein einfaches Eingabefeld anwenden, dann ist nur eine kleine Abwandlung des Formularcodes notwendig.

<FORM name="zaehlformular">

<B>Sie haben noch:
<INPUT readOnly maxLength="3" size="3" name="Anzahl"> Zeichen</B><BR>
<INPUT type="text" onkeydown="CheckLen(this)" onkeyup="CheckLen(this)" onfocus="CheckLen(this)" onchange="CheckLen(this)">

</FORM>


tf

Bookmark setzen... These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Print
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Bloglines
  • MisterWong
  • MySpace
  • Reddit
  • SEOigg
  • Technorati
  • TwitThis
  • Y!GG
  • Google Bookmarks

Weiterführende Links: