Basierend auf einem Forums-Beitrag vom 02.03.1999 von:
Dennis, dkehrig@gymgoch.kle.nw.schule.de
und von Antje Hofmann, ah@pc-anfaenger.de
Die Überwachung von Tastaturereignissen, z.B. das Betätigen der Eingabetaste, wird durch den 
Event-Handler onkeypress realisiert. Dieser hat die Aufgabe, nach einem Tastendruck eine verarbeitende Funktion aufzurufen. Sie können die Überwachung auf einzelne Felder beschränken oder mehrere Felder mit verschiedenen Überwachungsfunktionen versehen. Die jeweiligen Felder überwachen Sie dann durch folgende Angabe:
document.Formularname.Feldname.onkeypress = Funktionsname
<html><head><title>Tastaturüberwachung</title></head>
<body>
<form name="tester">
Passwort: <input type="password" name="passwort" size="8" maxlength="8">
Ausgabe: <input type="text" name="ausgabe" size="8" maxlength="8" readonly>
Neues Feld: <input type="text" name="textfeld" size="8" maxlength="8">
Löschen: <input type="reset" value="Neu">
</form>
<script language="JavaScript">
<!--
function ausloeser(taste)
{
if (document.layers){ if (taste.which == "13") uebertrag();}
else if (window.event.keyCode == "13") uebertrag();
}
function uebertrag()
{
if(document.tester.passwort.value == "Auslese")
document.tester.ausgabe.value = "Richtig!";
else document.tester.ausgabe.value = "Falsch!";
}
document.tester.passwort.onkeypress = ausloeser;
document.tester.textfeld.onkeypress = uebertrag;
//-->
</script>
</body></html>
|
Im Beispiel wird die Eingabe eines Passwortes auf Richtigkeit überprüft. Die Prüfung des Passwortes wird durch die Funktion uebertrag() vorgenommen. Diese Funktion wird je nach Feld entweder durch das Drücken der Eingabetaste oder durch das Drücken einer beliebigen Taste aufgerufen.
Die Felder passwort und textfeld werden beide durch den Event-Handler onkeypress überwacht. Im Feld passwort wird mit jedem Tastenanschlag die Funktion auslöser() aufgerufen. Hier wird geprüft, ob es sich um die Eingabetaste handelt. Ist dies der Fall, wird die Funktion uebertrag() aufgerufen. Das Feld textfeld dagegen wird nur im Hinblick auf eine Tastatureingabe überwacht. Ein Tastendruck ruft sofort die Funktion uebertrag() auf.
Zwischen dem MS Internet Explorer und dem Netscape Navigator besteht ein erheblicher Unterschied in der Verarbeitung der Event-Handler. Lesen Sie dazu auch den SELFHTML-Abschnitt event: Allgemeines zur Verwendung.
 
|
Basierend auf einem Forums-Beitrag vom 09.04.1999 von
Christine Kuehnel, kuehnel@screenExa.net
und auf einem Forums-Beitrag vom 07.06.1999 von:
Hendrik Otting, hendrik@ipcon.de
und von:
Antje Hofmann, ah@pc-anfaenger.de
Eine Änderung der Fenstergröße hat im Netscape Navigator die Folge, dass dieser gesetzte Variablen, dynamische Positionierungen oder Style-Sheet-Angaben "vergisst". Es ist möglich, die Änderungen der Fenstergröße zu überwachen und damit gezielt auf die Änderung zu reagieren. Auch im MS Internet Explorer ist es gelegentlich sinnvoll, auf Änderungen reagieren zu können.
Für die Überwachung der Fenstergröße wird der Event-Handler onRezise verwendet. Dieser Event-Handler tritt ein, wenn der Anwender die Fenstergröße ändert. Sie können diesem Event-Handler eine Funktion zuordnen, die bei Größenänderungen ausgeführt wird.
<html><head>
<title>Größenänderung überwachen</title>
<script language="JavaScript">
<!--
/*Ueberwachung Netscape Navigator*/
/**
* resize.js 0.3 970811
* by gary smith
* js component for "reloading page onResize"
*/
if(!window.saveInnerWidth)
{
window.onresize = resize;
window.saveInnerWidth = window.innerWidth;
window.saveInnerHeight = window.innerHeight;
}
function resize()
{
if (saveInnerWidth < window.innerWidth || saveInnerWidth > window.innerWidth ||
saveInnerHeight > window.innerHeight || saveInnerHeight < window.innerHeight)
{
window.history.go(0);
}
}
//-->
</script>
</head>
<body>
<script language="JavaScript">
<!--
if (document.all)
{
if(!window.saveInnerWidth)
{
window.onresize = neuresize;
window.saveInnerWidth = document.body.offsetWidth;
window.saveInnerHeight = document.body.offsetHeight;
}
}
function neuresize()
{
if (saveInnerWidth < document.body.offsetWidth || saveInnerWidth > document.body.offsetWidth ||
saveInnerHeight > document.body.offsetHeight || saveInnerHeight < document.body.offsetHeight)
{
window.history.go(0);
}
}
//-->
</script>
Text
</body><html>
|
Beim Laden der Datei existiert die Variable window.saveInnerWidth noch nicht. Dies führt dazu, dass der if-Zweig der Abfrage ausgeführt wird. Daraufhin wird mit window.onresize = resize; die Überwachung der Änderung der Fenstergröße aktiviert.
Anschließend werden die Variablen window.saveInnerWidth und window.saveInnerHeight
mit Werten der Fenstereigenschaften innerWidth und
innerHeight belegt.
Die Variablennamen und der Funktionsname wurden vom Verfasser des Scriptes
in Anlehnung an ihre Aufgabe gewählt und sind frei wählbar.
Die Funktion rezise() wird aufgerufen, wenn der Event-Handler onrezise aktiv wird.
Sie prüft nun anhand der in window.saveInnerWidth und window.saveInnerHeight gespeicherten Werte,
ob sich die Fenstergröße verändert hat. In diesem Fall wird durch die Verwendung der Methode history.go()
ein Neuaufbau der Seite veranlasst, ohne dass diese vom Server erneut geladen werden muss. Wird der Event-Handler onrezise aufgerufen, ohne dass eine reale Veränderung der Fenstergröße stattgefunden hat -
das kann gelegentlich passieren - reagiert das Skript und verhindert ein Endlos-Reload.
Das Schema der Überwachung des MS Internet Explorers erfolgt analog. Da dieser jedoch die Fenstereigenschaften innerWidth und innerHeight
nicht kennt, werden in den Variablen window.saveInnerWidth und window.saveInnerHeight die angezeigte Breite und Höhe des Elementes <body> gespeichert. Diese
Werte erhalten Sie durch die Verwendung von offsetWidth und offsetHeight
des all-Objektes. Sie können dieses Script erst ausführen, wenn das Element <body> dem Browser bekannt ist. Platzieren Sie es deshalb immer innerhalb von <body>...</body> bzw. verwenden Sie eine Funktion.
Sie können die Überwachung der Fenstergröße auf einen der beiden Browser beschränken: Beide Scripte arbeiten unabhängig voneinander und erzeugen
im jeweils anderen Browser keine Fehlermeldung.
Beachten Sie, dass Sie mit diesem Script nur den Neuaufbau der Seite erreichen. Eventuell geänderte Variablen und Werte gehen dabei verloren.
Sie können wichtige Variablen jedoch im Fensternamen ablegen, da dieser auch im Falle eines Neuladens erhalten bleibt. Lesen Sie dazu auch den
SELFAKTUELL - Artikel 
Hatto von Hatzfeld - Javascript-Wertübergabe zwischen HTML-Dokumenten.
|
|
Basierend auf Forums-Beiträgen vom 11.11.1999 von:
Günter Laudenklos, eisbaer@purpurhain.de
Connie, cmg@avantart.com
Die Event-Handler onClick und
onDBLclick reagieren auf das Anklicken durch den Nutzer.
Sie können beide Event-Handler gleichzeitig verwenden und Ihnen verschiedene Funktionen zuweisen. Schwierig
wird es, wenn Sie im Fall des Doppelklicks den Event-Handler onClick unterdrücken möchten.
Sie erreichen dies jedoch, indem Sie die durch dieses Event aufgerufene Funktion zeitverzögert unter Verwendung von setTimeout starten.
Verwendet der Anwender den Doppelklick, so unterbindet clearTimeout() die Ausführung der
Funktion.
<html><head><title>Klick und Doppelklick</title>
<script language="JavaScript">
<!--
merker = 0;
tout = null;
function resultat()
{
clearTimeout(tout);
alert(merker+'mal geklickt');
merker = 0;
}
//-->
</script>
</head><body>
<form>
<input type="button" value="Klick oder Doppelklick" onDBLclick="merker++;resultat();return true;" onClick="merker++;tout = setTimeout('resultat()',500);return true;">
</form>
<a href="#" onDBLclick="merker++;resultat();return false;" onClick="merker++;tout = setTimeout('resultat()',500);return false;">Klick oder Doppelklick</a>
</body></html>
|
Mit einem einfachen Klick auf den Button wird der Event-Handler onClick aktiviert. Dieser erhöht den Wert des Zählers merker um eins und ruft die Funktion resultat() zeitverzögert auf. Der verzögerte Aufruf wird in der Variablen tout gespeichert. Erfolgt kein weiterer Klick auf den Button, wird die Funktion ausgeführt.
Verwendet der Nutzer den Doppelklick, kommen sowohl der Event-Handler onClick als auch der Event-Handler onDBLclick zum Einsatz. Die ebenfalls durch onDBLclick aufgerufene Funktion wird jedoch sofort ausgeführt. Diese löscht zuerst den von onClick gesetzten Aufruf der Funktion. Eine der Wirkungen des Event-Handlers onClick wird damit unterdrückt. Dass dieser trotzdem zum Zuge gekommen ist, erkennen Sie daran, dass der Zähler merker auf Zwei steht. Er wurde von beiden Event-Handlern jeweils um eins hochgezählt. Anschließend gibt die Funktion aus, wie oft geklickt wurde und setzt den Zähler auf Null zurück.
Der Event-Handler onDBLclick wird von den 3er-Versionen des MS Internet Explorers und Netscape Navigators nicht interpretiert. Das vorgestellte Beispiel funktioniert dennoch in diesen beiden Browsern, im MS Internet Explorer der Version 3 jedoch nur bei der Verwendung eines Buttons. Hier kommt der Event-Handler onClick zweimal zum Zuge. Der erste Aufruf der Funktion resultat() löscht dabei den zweiten unmittelbar folgenden Aufruf.
|
| |
weiter: |
Neue Fenster mit JavaScript
|
zurück: |
Laufzeitverhalten
|
SELFHTML
Forums-Auslese
JavaScript |
|
© 2000 das Redaktionsteam
