Tastaturereignisse
(Auszug aus "Das Einsteigerseminar SVG — Webgrafiken mit XML" von Helma Spona)
Auch wenn die SVG-Dokumentation keine Tastaturereignisse angibt, unterstützt der SVG-Viewer solche. Daher soll hier an einem Beispiel verdeutlicht werden, wie diese Tastaturereignisse funktionieren. Beim Einsatz sollten Sie jedoch immer die zukünftige Entwicklung des SVG-Standards und des SVG-Viewers bzw. der SVG-Unterstützung der Browser im Auge behalten. Alles was nicht dem Standard entspricht, funktioniert dann natürlich nur in ausgewählten Viewern oder Programmen. Dies ist auch der Grund, warum auf Tastaturereignisse nicht sehr ausführlich eingegangen wird.
Das hier vorgestellte Beispiel zeigt, wie Sie beim Drücken einer Taste deren Code ermitteln. Wenn der Benutzer die Eingabe mit Enter abschließt, wird der durch die einzelnen Tastendrücke erzeugte Text in einer Meldung ausgegeben.
Hinweis:
Statt der Ausgabe in einer Meldung könnte die Eingabe natürlich auch als Text in der Grafik angezeigt werden. Dazu müssen Sie jedoch die Grafik dynamisch anpassen. Wie das funktioniert, zeigt der folgende Abschnitt.
Um einen Tastendruck abzufragen, müssen Sie einen Eventhandler für das Event keydown implementieren. Innerhalb der Funktion, die bei Ereigniseintritt ausgeführt wird, kann dann der Code der Taste über die Methode getKeyCode( ) ermittelt werden. Die Enter-Taste hat den Code 13. Wird dieser ermittelt, soll die Eingabe beendet werden. Das bedeutet aber auch, dass der Event-Listener wieder gelöscht werden muss, weil sonst natürlich nachfolgende Eingaben weiter bearbeitet werden. Um einen Event-Listener wieder zu löschen, wenden Sie die removeEventListener-Methode an. Sie muss die gleichen Parameter übergeben bekommen wie die Methode, mit der Sie den Eventhandler implementiert haben.
Hinweis:
Die Methode removeEventListener können Sie natürlich auch verwenden, um jedes andere Ereignis, nicht nur Tastaturereignisse, wieder zu löschen.
<?xml version="1.0"?>
...
<svg width="300" height="300" onload="init(evt)">
<script type="text/ecmascript">
<![CDATA[
var elem;
var svgdok;
var eingabe="";
function init(evt)
{
svgdok=evt.getTarget().getOwnerDocument();
elem=svgdok.getElementById("Zeichnung");
elem.addEventListener("keydown", ausgeben, false);
}
function ausgeben(evt)
{
var Taste= evt.getKeyCode();
if (Taste==13)
{
//Eventhandler loeschen und Text ausgeben
elem.removeEventListener("keydown", ausgeben, false);
alert(eingabe);
}
else
{
eingabe=eingabe + String.fromCharCode(Taste);
}
}
]]>
</script>
<rect id="Zeichnung" x="0" y="0" width="300" height="300" style="fill:white;stroke:none;opacity:0"/>
</svg>
Hinweis:
Beachten Sie, dass die Methode getKeyCode nur den ASCII-Code zurückgibt, der für Großbuchstaben gilt. Wenn Sie unterscheiden möchten, ob ein Groß- oder Kleinbuchstabe gedrückt wurde, müssen Sie die Umschalt-Taste abfragen. Dazu stellt der SVG-Viewer die Methode getShiftKey( ) bzw. getAltKey( ) zur Verfügung, um eine gedrückte Alt-Taste zu ermitteln.
Wenn Sie den Code testen, kann es sein, dass Eingaben nicht akzeptiert werden. Das liegt daran, dass die SVG-Grafik aktiviert sein muss. Dazu genügt ein Klick mit der Maus auf die Zeichnungsfläche.
Abbildung: Ausgabe des eingegebenen Textes.
Hinweis:
Das Event keydown tritt ein, wenn eine Taste heruntergedrückt wird. Analog dazu gibt es das Event keyup, wenn die Taste losgelassen wird, und keypress, wenn eine Taste gedrückt und losgelassen wird.
| << zurück | vor >> |
| Tipp der data2type-Redaktion: Zum Thema SVG bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an: |
Copyright © verlag moderne industrie GmbH 2001
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "Das Einsteigerseminar SVG — Webgrafiken mit XML" denselben Bestimmungen wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.
verlag moderne industrie GmbH, Justus-von-Liebig-Straße 1, D-86899 Landsberg/Lech, fon ++49 (0) 81 91 / 125 – 0, leserservice(at)mi-verlag.de