Werbung einblenden Werbung ausblenden


Home / Tutorials / JavaScript Handbuch / Tastaturabfrage


Abfrage der Zeichenmenge die über die Tastatur eingegeben werden
Feststellen, welche Taste gedrückt wurde

Abfrage der Zeichenmenge die über die Tastatur eingegeben werden

Will man nur wissen, ob eine Taste gedrückt wurde oder nicht, ist das Verfahren relativ simpel. Für die Frage, ob eine Taste gedrückt wurde oder nicht, interessiert man sich öfter als man denkt. Man interessiert sich zum Beispiel dann dafür, wenn dem User aufblenden will, wieviele Zeichen er in eine Textbox schon eingegeben hat, was dann sinnvoll ist, wenn man die Anzahl der Zeichen beschränkt hat. Der User muss dann wissen,wieviele Zeichen er schon eingegeben hat, sonst muss er ja selber mitzählen. Schauen wir uns an dem Beispiel unten an, von was die Rede ist.

Sie dürfen höchstens 20 Zeichen eingeben.

Sie haben bereits 0 Zeichen eingegeben.

<script language="javascript">

function zaehlen(a)
{
laenge=a.length;
if(laenge <= 20)
{
document.getElementById("zaehler").innerHTML=laenge;
}
else
{
document.banane.kirsche.value=a.substr(0,20)
document.getElementById("zaehler").innerHTML="Keine Romane bitte. Kurz und präzise";
}
}
</script>

<p> <form name="banane">
Sie dürfen höchstens 20 Zeichen eingeben.<br>
<textarea name="kirsche" cols="40" rows="6" onkeyup=zaehlen(this.value)></textarea>
</form>
<p>
Sie haben bereits <span class="rausgekommen">0</span> Zeichen eingegeben.
</p>

Feststellen, welche Taste gedrückt wurde

Der obige Skript ist nützlich und von schlichter Schönheit. Das Bild ändert sich leider radikal, wenn wir nicht nur wissen wollen, dass eine Taste gedrückt wurde, sondern auch welche. Das kann zum Beispiel interessant sein, wenn man verhindern will, dass der User Buchstaben eingibt, wo nur Zahlen erlaubt sind, oder Zahlen, wo nur Buchstaben erlaubt sind. Natürlich könnte man das auch nachträglich ermitteln und ihm dann mitteilen, dass was schief gelaufen ist, man kann es aber auch gleich machen. Das sieht dann so aus.

Eingabe der Postleitzahl
<script language="JavaScript">

document.onkeypress=packmich;

function packmich(e)
{
if(!document.all)
{
event=e;
taste=e.keyCode;
}
else
{
taste=event.keyCode;
}

if(event.srcElement.name =="kirsche2")
{
was=String.fromCharCode(taste);
eingaben=document.banane2.kirsche2.value;
reg_ex=/\d/;
if(!reg_ex.test(was))
{
alert("Postleitzahlen bestehen ausschliesslich aus Zahlen");
document.banane2.kirsche2.value=eingaben.substr(0,eingaben.length-1);
}
}
}
</script>

<form name="banane2">
<table><tr>
<td>Eingabe der Postleitzahl </td>
<td><input name="kirsche2" type=text size="8" maxlength="5"></td></tr>
</table>
</form>

Für die gesamte Seite definieren wir, dass die Funktion packmich() aufgerufen werden soll, wenn der User eine Taste loslässt.

document.onkeyup=packmich;

Wir wollen aber, dass alle weiteren Funktionen nur ausgelöst werden, wenn die Maustaste in dem Eingabefeld losgelassen wird, dass wir tatsächlich kontrollieren wollen. Folglich müssen wir erstmal wissen, über welchem Eingabefeld die Maustaste losgelassen wurde. Wir fangen das ab mit

function packmich(e)
{
if(!document.all)
{
event=e;
taste=e.keyCode;
}
else
{
taste=event.keyCode;
}

if(event.srcElement.name =="kirsche2")
{
.....
.....
.....
}

Das Verfahren ist also das gleiche, das schon bei drag and drop beschrieben wurde. Durch diese Kapselung ist garantiert, dass alle weiteren Funktionen nur dann ausgeführt werden, wenn der Fokus auf der Textbox ist, die wir tatsälich kontrollieren wollen. Anschliessend prüfen wir, ob wir es mit einer Zahl zu tun haben oder irgend etwas anderem.

if(event.srcElement.name =="kirsche2")
{
was=String.fromCharCode(taste);
eingaben=document.banane2.kirsche2.value;
reg_ex=/\d/;
if(!reg_ex.test(was))
{
alert("Postleitzahlen bestehen ausschliesslich aus Zahlen");
document.banane2.kirsche2.value=eingaben.substr(0,eingaben.length-1);
}
}

Mit event.keyCode haben wir den Ascii Wert der Taste ermittelt. Das ist aber nicht das, was uns interessiert. Uns interessiert, um welchen Buchstaben, bzw. welche Zahl es sich handelt. Folglich konvertieren wir mit

was=String.fromCharCode(taste);

den Ascii Code in das entsprechende Zeichen. Über eine regular expression, siehe Regular Expressions und deren praktische Anwendung, prüfen wir dann, ob es sich um eine Zahl handelt. Handelt es sich nicht um eine Zahl, geben wir eine Meldung aus und streichen das letzte Zeichen wieder.

vorhergehendes Kapitel