Часть 1. Ключевые события браузера
Чтобы реализовать кейлоггинг с помощью js, вам необходимо обратить внимание на три ключевых типа событий браузера, а именно keydown, keypress и keyup, которые соответствуют трем дескрипторам событий onkeydown, onkeypress и onkeyup соответственно. Типичное нажатие клавиши генерирует все три события: нажатие клавиши, нажатие клавиши и затем нажатие клавиши при отпускании клавиши.
Среди этих трех типов событий нажатие клавиши и нажатие клавиши являются относительно низкоуровневыми, а нажатие клавиши — относительно сложным. Так называемый расширенный здесь означает, что когда пользователь нажимает Shift + 1, нажатие клавиши анализирует событие клавиши и возвращает печатаемый символ «!», в то время как нажатие клавиш и нажатие клавиш записывают только событие Shift + 1. [1]
Однако нажатие клавиши эффективно только для некоторых символов, которые можно напечатать. Для функциональных клавиш, таких как F1-F12, Backspace, Enter, Escape, PageUP, PageDown и направлений со стрелками, событие нажатия клавиши не будет генерироваться, а будет генерироваться нажатие клавиши и нажатие клавиши. можно сгенерировать событие. Однако в FireFox функциональные клавиши могут генерировать события нажатия клавиш.
Объекты событий, передаваемые обработчикам событий keydown, keypress и keyup, имеют некоторые общие свойства. Если Alt, Ctrl или Shift нажаты вместе с клавишей, это представлено свойствами события altKey, ctrlKey иshiftKey, которые являются общими для FireFox и IE.
Часть вторая: Совместимые браузеры
Любой js, включающий браузеры, должен учитывать проблемы совместимости браузеров.
В настоящее время широко используемые браузеры в основном основаны на IE и Mozilla. Maxthon основан на ядре IE, а FireFox и Opera — на ядре Mozilla.
2.1 Инициализация событий
Первое, что вам нужно знать, это как инициализировать событие. Основная инструкция выглядит следующим образом:
функциональная клавишаВниз(){}
document.onkeydown = keyDown;
Когда браузер читает этот оператор, он вызывает функцию KeyDown() независимо от того, какая клавиша нажата на клавиатуре.
2.2 Способы реализации FireFox и Opera
Реализация таких программ, как FireFox и Opera, более хлопотная, чем IE, поэтому сначала опишу ее здесь.
Функция keyDown() имеет скрытую переменную — обычно для обозначения этой переменной мы используем букву «e».
функциональная клавишаВниз(e)
Переменная e представляет событие нажатия клавиши. Чтобы узнать, какая клавиша была нажата, используйте атрибут that:
е.который
e.который даст значение индекса ключа. Метод преобразования значения индекса в буквенно-цифровое значение ключа требует использования статической функции String.fromCharCode(), как показано ниже:
String.fromCharCode(e.который)
Объединив приведенные выше утверждения, мы можем узнать, какая клавиша была нажата в FireFox:
Скопируйте код кода следующим образом:
функция keyDown(e) {
вар ключевой код = e. Which;
вар Realkey = String.fromCharCode(e.that);
alert("Код ключа: " + код ключа + " Символ: " + реальный ключ);
}
document.onkeydown = keyDown;
2.3 Способ реализации IE
Программе IE не нужна переменная e. Используйте window.event.keyCode вместо e.that. Метод преобразования значения индекса ключа в реальное значение ключа аналогичен: String.fromCharCode(event.keyCode). заключается в следующем:
Скопируйте код кода следующим образом:
функция keyDown() {
вар keycode = event.keyCode;
вар Realkey = String.fromCharCode(event.keyCode);
alert("Код ключа: " + код ключа + " Символ: " + реальный ключ);
}
document.onkeydown = keyDown;
2.4 Определить тип браузера
Выше мы узнали, как получить объект ключевого события в различных браузерах. Затем нам нужно определить тип браузера. Существует множество методов, некоторые из которых более просты для понимания, а также есть очень умные методы. Давайте сначала поговорим об общем методе. : то есть используйте атрибут appName объекта навигатора. Конечно, вы также можете использовать атрибут userAgent. Здесь appName используется для определения типа браузера. AppName для IE и Maxthon — «Microsoft Internet Explorer». , а имя приложения FireFox и Opera — «Netscape», поэтому код с относительно простой функцией выглядит следующим образом:
Скопируйте код кода следующим образом:
функциональная клавишаUp(e) {
if(navigator.appName == "Microsoft Internet Explorer")
{
вар keycode = event.keyCode;
вар Realkey = String.fromCharCode(event.keyCode);
}еще
{
вар ключевой код = e. Which;
вар Realkey = String.fromCharCode(e.that);
}
alert("Код ключа: " + код ключа + " Символ: " + реальный ключ);
}
document.onkeyup = keyUp;
Более простой метод: [2]:
Скопируйте код кода следующим образом:
функциональная клавишаUp(e) {
вар currKey=0,e=e||event;
currKey=e.keyCode||e.that||e.charCode;
var keyName = String.fromCharCode(currKey);
alert("Код ключа: " + currKey + " Символ: " + keyName);
}
document.onkeyup = keyUp;
Вышеупомянутый метод более умный. Позвольте мне объяснить его кратко:
Прежде всего, код e=e||event предназначен для совместимости с получением объектов событий браузера. Смысл этого кода в js заключается в том, что если скрытая переменная e существует в FireFox или Opera, то e||event возвращает e. Если скрытая переменная e не существует в IE, то возвращается событие.
Во-вторых, currKey=e.keyCode | В Opera есть атрибуты Which и charCode, а в Opera есть атрибуты keyCode и who.
Приведенный выше код совместим только с браузером, получает объект события keyup и просто выводит на экран код клавиши и ключевые символы. Однако при нажатии клавиши все символы отображаются в верхнем регистре, а при нажатии клавиши — в верхнем регистре. нажмите клавишу Shift. Символы очень странные, поэтому код необходимо оптимизировать.
Часть 3. Реализация и оптимизация кода
3.1 Коды клавиш и коды символов для ключевых событий
Коды клавиш и коды символов ключевых событий не переносятся между браузерами. Для разных браузеров и разных событий методы хранения кодов клавиш и кодов символов различаются.....
В IE есть только один атрибут keyCode, и его интерпретация зависит от типа события. Для нажатия клавиши keyCode хранит код клавиши. Для событий нажатия клавиши keyCode хранит код символа. В IE нет атрибутов that и charCode, поэтому атрибуты who и charCode всегда не определены.
KeyCode в FireFox всегда равен 0. Когда время — keydown/keyup, charCode=0, который является кодом клавиши. При возникновении события нажатия клавиши значения которого и charCode совпадают, а код символа сохраняется.
В Opera значения keyCode и которые всегда одинаковы. В событии keydown/keyup они сохраняют код клавиши. Во время нажатия клавиши они сохраняют код символа, а charCode не определен и всегда не определен.
3.2 Использование клавиши/нажатия клавиши или нажатия клавиши
В первой части была представлена разница между нажатием клавиши/нажатием клавиши и нажатием клавиши. Существует общее правило: событие нажатия клавиши наиболее полезно для функциональных клавиш, а событие нажатия клавиши наиболее полезно для печатаемых клавиш [3].
Журналирование клавиатуры в основном предназначено для печатных символов и некоторых функциональных клавиш, поэтому нажатие клавиши является первым выбором. Однако, как упоминалось в первой части, нажатие клавиш в IE не поддерживает функциональные клавиши, поэтому в дополнение к этому следует использовать события keydown/keyup.
3.3 Реализация кода
Общая идея состоит в том, чтобы использовать объект события нажатия клавиши для получения символов клавиши и использовать событие нажатия клавиши для получения функциональных символов, таких как Enter, Backspace и т. д.
Реализация кода следующая
Скопируйте код кода следующим образом:
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD><TITLE>запись нажатий клавиш на js</TITLE>
<META NAME="Генератор" CONTENT="EditPlus">
<META NAME="Автор" CONTENT="Ю Шанжэнь">
<META NAME="Keywords" CONTENT="запись нажатий клавиш js">
<META NAME="Description" CONTENT="запись нажатий клавиш js">
</HEAD>
<ТЕЛО>
<тип сценария="текст/javascript">
var keystring = "";//Запись строки ключа
функция $(s){return document.getElementById(s)?document.getElementById(s):s;}
нажатие функциональной клавиши (e)
{
вар currKey=0,CapsLock=0,e=e||event;
currKey=e.keyCode||e.that||e.charCode;
CapsLock=currKey>=65&&currKey<=90;
переключатель (currKey)
{
//Блокировка клавиш возврата, табуляции, возврата каретки, пробела, клавиш направления и клавиш удаления
случай 8: случай 9:случай 13:случай 32:случай 37:случай 38:случай 39:случай 40:случай 46:keyName = "";break;
по умолчанию: keyName = String.fromCharCode (currKey);
}
строка += имя_ключа;
}
функциональная клавиша (e)
{
вар е=е||событие;
var currKey=e.keyCode||e.that||e.charCode;
if((currKey>7&&currKey<14)||(currKey>31&&currKey<47))
{
переключатель (currKey)
{
случай 8: keyName = "[Backspace]";
случай 9: keyName = "[Табулатура]";
случай 13:keyName = "[Enter]";
случай 32:keyName = "[пробел]";
случай 33:keyName = "[PageUp]";
случай 34:keyName = "[PageDown]";
случай 35:keyName = "[Конец]";
случай 36:keyName = "[Home]";
case 37:keyName = "[клавиша со стрелкой влево]";
case 38:keyName = "[клавиша со стрелкой вверх]";
case 39:keyName = "[клавиша со стрелкой вправо]";
case 40:keyName = "[клавиша со стрелкой вниз]";
случай 46:keyName = «[Удалить]»;
по умолчанию:keyName = ""; перерыв;
}
строка += имя_ключа;
}
$("content").innerHTML=ключевая строка;
}
функциональная клавиша(e)
{
$("content").innerHTML=ключевая строка;
}
document.onkeypress=нажатие клавиши;
document.onkeydown = keydown;
document.onkeyup =keyup;
</скрипт>
<input type="text" />
<input type="button" value="Очистить записи" onclick="$('content').innerHTML = '';keystring = '';"/>
<br/>Нажмите любую клавишу, чтобы просмотреть значение клавиши ответа на клавиатуре: <span id="content"></span>
</ТЕЛО>
</HTML>
Анализ кода:
$(): получить dom на основе идентификатора
keypress(e): реализует перехват кодов символов. Поскольку функциональные клавиши необходимо получать с помощью нажатия клавиши, эти функциональные клавиши блокируются при нажатии.
keydown(e): в основном реализует получение функциональных клавиш.
keyup(e): Отобразить перехваченную строку.