Tasteneingaben zählen…

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

This entry was posted in Javascript Tricks. Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *