понедельник, 18 февраля 2008 г.

Реакция на клавиатуру (Выпуск 6)

А вы знаете, что с помощью DHTML можно контролировать практически полностью нажатия клавиш клавиатуры? Внимание, Netscape Communicator 4.0 не обладает возможностью перехватывать события нажатия клавиши под Unix'ом.

Первое, что вам нужно сделать, - это инициализировать событие. Вот типичная инициализация события keydown:

document.onkeydown = keyDown

Когда браузер прочитает эту строку, то приготовится к тому, что при любом нажатии на клавишу функция keyDown() должна быть вызвана. Название keyDown() вы можете переименовать по вашему усмотрению.

Обработка нажатий клавиш в разных браузерах происходит по-разному.

Netscape

Для Нетскейпа нужно добавить вот такие строки:

document.onkeydown = keyDown
if (ns4) document.captureEvents(Event.KEYDOWN)

Если вы забудете прописать этот код, то можете получить путаницу при нажатиях клавиш клавиатуры и мышки. При этом в ваш keyDown() должен передаваться скрытый параметр, в нашем примере - буква е, как распространённая практика обозначения события (event).

function keyDown(e)

Эта буква е содержит информацию о том, какая клавиша была нажата. Чтобы получить доступ к этой информации, используйте свойство which:

e.which

Заметьте, что значение свойства which - это информация о коде клавиши, а не её буквенное или численное значение! Для того, чтобы получить буквенное или численное значение клавиши, используйте следующий код:

String.fromCharCode(e.which)

Теперь объединим всё вместе:

function keyDown(e) {
var keycode = e.which
var realkey = String.fromCharCode(e.which)
alert("keycode: " + keycode + "\nrealkey: " + realkey)
}

document.onkeydown = keyDown
document.captureEvents(Event.KEYDOWN)

В примере использования этой функции (только Netscape!!!), мы на каждое нажатие клавиши будем получать диалоговое окно с кодом и значением нажатой клавиши.

Internet Explorer

В эксплорере вым не нужно передавать загадочную переменную е. И вместо e.which нужно использовать window.event.keyCode. А всё остальное очень похоже:

function keyDown() {
var keycode = event.keyCode
var realkey = String.fromCharCode(event.keyCode)
alert("keycode: " + keycode + "\nrealkey: " + realkey)
}

document.onkeydown = keyDown
document.onkeydown = keyDown

Пример использования функции (Internet Explorer только!)

Комбинирование двух методов

Каждый браузер обрабатывает символьную таблицу по-своему. Чтобы сделать ваш код совместимымм с обоими браузерами, я предлагаю забыть о значениях клавиш и работать только с их кодом. Во фрагменте кода ниже переменные nKey и ieKey устанавливаются не в ноль, если код считывается нетскейпом и эксплорером, соответственно:

function keyDown(e) {
if (ns4) {var nKey=e.which; var ieKey=0}
if (ie4) {var ieKey=event.keyCode; var nKey=0}
alert("nKey:"+nKey+" ieKey:" + ieKey)
}

document.onkeydown = keyDown
if (ns4) document.captureEvents(Event.KEYDOWN)

Пример использования.

По мотивам http://www.jalix.org/ressources/internet/dhtml/_dynduo/dynduo/en/keystrokes.html