Tajniki DHTML


Zdarzenia wywołane klawiaturą

Można je zdefiniować na dwa sposoby. Pierwszy jest taki sam jak w przypadku zdarzeń wywołanych myszą jako funkcje, które są przypisane do obiektów, np. onKeyPress(). Drugi sposób to zainicjowanie zdarzenia na całej stronie. Jest to stosowane najczęściej w grach lub jeżeli nie można przypisać zdarzeń do obiektów. Poniżej pokazana jest inicjacja zdarzenia przyciśnięcia klawisza:

document.onkeydown = keyDown;

Odczytanie przez przeglądarkę powyższego wiersza kodu spowoduje wywoływanie funkcji keyDown() w każdym przypadku naciśnięcia dowolnego klawisza. Sama inicjacja jest zależna od rodzaju przeglądarki. W przypadku NetscapeŐa należy dopisać wywołanie funkcji przechwytującej interesujące zdarzenie. Poniżej przedstawiona jest cała funkcja inicjująca:

document.onkeydown = keyDown;

if (ns4) document.captureEvents(Event.KEYDOWN);

Różnice są również w sposobie odczytu naciśniętego klawisza. W Netscapie kod naciśniętego klawisza jest przekazywany jako parametr do wywoływanej funkcji keyDown(). W Explorerze kod ten jest pobierany z obiektu event należącego do obiektu window.

Poniżej przedstawiona jest funkcja obsługująca zdarzenie po naciśnięciu klawisza.

function keyDown(e) {

if (ns4) var Key=e.which;

else if (ie4) var Key=window.event.keyCode;

}

Oczywiście w identyczny sposób można zdefiniować funkcje powodujące zwolnienie klawisza. Poniżej przedstawiono fragment kodu wykonujący inicjację oraz obsługę obu zdarzeń. Funkcje te wyświetlają, jaki klawisz został naciśnięty i zwolniony.

document.onkeydown = keyDown;

document.onkeyup = keyUp;

if (ns4) document.captureEvents(Event.KEYDOWN | Event.KEYUP);

function keyDown(e) {

if (ns4) var Key=e.which;

else if (ie4) var Key=window.event.keyCode;

alert('Wciśnięty klawisz: '+String.fromCharCode(Key));

}

function keyUp(e) {

if (ns4) var Key=e.which;

else if (ie4) var Key=window.event.keyCode;

alert('Wyciśnięty klawisz: '+String.fromCharCode(Key));

}

W keyDown() i keyUp() dodatkowo została użyta standardowa funkcja fromCharCode(), która zamienia kod znaku na rzeczywistą wartość klawisza.

Zmiana zawartości warstwy

Znacznik DIV jest nietypowym znacznikiem. Oprócz zmiany jego właściwości można też zmieniać treść między otwarciem i zamknięciem znacznika. Jednakże należy zastosować osobne rozwiązania dla Explorera i dla Netscape'a.

W przypadku Explorera, aby wstawić treść do znacznika DIV, należy do właściwości innerHTML przypisać ową treść. W Netscapie do tego celu należy użyć standardowych funkcji służących do pisania w dokumencie, ta przeglądarka traktuje bowiem warstwy jak osobne dokumenty.

Poniżej przedstawiono fragment kodu funkcji wpisującej tekst do warstwy:

Function wpisz() {

if (ie4) document.all.nameDiv.innerHTML = 'Dowolny tekst';

else

if (ns4) {

document.layers.nameDiv.document.open();

document.layers.nameDiv.document.write('Dowolny tekst');

document.layers.nameDiv.document.close();

}

}

Funkcję taką można rozbudować, aby wstawiać dowolny tekst do dowolnej warstwy. W funkcji tekst wpisywany jest w apostrofach i jeżeli we wstawianym tekście występuje taki znak, to należy poprzedzić go znakiem / (slash). Oczywiście znak / należy również poprzedzić takim samym znakiem.