Parte 1: Principais eventos do navegador
Para implementar keylogging com js, você precisa prestar atenção aos três principais tipos de eventos do navegador, nomeadamente keydown, keypress e keyup, que correspondem aos três identificadores de eventos de onkeydown, onkeypress e onkeyup respectivamente. Um pressionamento de tecla típico gerará todos os três eventos, na ordem keydown, keypress e, em seguida, keyup quando a tecla for liberada.
Entre esses três tipos de eventos, keydown e keyup são de nível relativamente baixo, enquanto keypress é relativamente avançado. O chamado avançado aqui significa que quando o usuário pressiona shift + 1, keypress analisa o evento de tecla e retorna um caractere "!" imprimível, enquanto keydown e keyup registram apenas o evento shift + 1. [1]
No entanto, o pressionamento de tecla só é eficaz para alguns caracteres que podem ser impressos. Para teclas de função, como F1-F12, Backspace, Enter, Escape, PageUP, PageDown e direções de seta, o evento keypress não será gerado, mas keydown e keyup. evento pode ser gerado. No entanto, no FireFox, as teclas de função podem gerar eventos de pressionamento de tecla.
Os objetos de evento passados para os manipuladores de eventos keydown, keypress e keyup possuem algumas propriedades comuns. Se Alt, Ctrl ou Shift forem pressionados junto com uma tecla, isso será representado pelas propriedades altKey, ctrlKey e shiftKey do evento, que são comuns ao FireFox e ao IE.
Parte Dois: Navegadores Compatíveis
Qualquer js que envolva navegadores deve considerar problemas de compatibilidade do navegador.
Atualmente, os navegadores comumente usados são baseados principalmente no IE e no Mozilla. Maxthon é baseado no kernel do IE, enquanto FireFox e Opera são baseados no kernel do Mozilla.
2.1 Inicialização de eventos
A primeira coisa que você precisa saber é como inicializar o evento. A instrução básica é a seguinte:
função keyDown(){}
document.onkeydown=keyDown;
Quando o navegador lê esta instrução, ele chamará a função KeyDown() independentemente da tecla pressionada no teclado.
2.2 Métodos de implementação do FireFox e Opera
A implementação de programas como FireFox e Opera é mais problemática que o IE, então vou descrevê-la primeiro aqui.
A função keyDown() possui uma variável oculta - geralmente usamos a letra “e” para representar esta variável.
tecla de funçãoDown(e)
A variável e representa um evento de pressionamento de tecla. Para descobrir qual tecla foi pressionada, use o atributo which:
e.qual
e.que fornecerá o valor do índice da chave O método de conversão do valor do índice no valor alfanumérico da chave requer o uso da função estática String.fromCharCode(), como segue:
String.fromCharCode(e.qual)
Juntando as afirmações acima, podemos descobrir qual tecla foi pressionada no FireFox:
Copie o código do código da seguinte forma:
tecla de funçãoDown(e) {
var código-chave = e.qual;
var realkey = String.fromCharCode(e.qual);
alert("Código-chave: " + código-chave + " Caractere: " + chave real);
}
document.onkeydown=keyDown;
2.3 Método de implementação do IE
O programa do IE não precisa da variável e. Use window.event.keyCode em vez de e. which. O método de conversão do valor do índice da chave no valor da chave real é semelhante: String.fromCharCode (event.keyCode). é o seguinte:
Copie o código do código da seguinte forma:
função teclaDown() {
var código-chave = event.keyCode;
var realkey = String.fromCharCode(event.keyCode);
alert("Código-chave: " + código-chave + " Caractere: " + chave real);
}
document.onkeydown=keyDown;
2.4 Determine o tipo de navegador
Aprendemos acima como obter o objeto de evento chave em vários navegadores. Então, precisamos determinar o tipo de navegador. Existem muitos métodos, alguns são mais fáceis de entender e também existem métodos muito inteligentes. : isto é, use o atributo appName do objeto navigator. Claro, você também pode usar o atributo userAgent aqui, appName é usado para determinar o tipo de navegador do IE e Maxthon. , e o appName do FireFox e Opera é "Netscape", então um código com uma função relativamente simples é o seguinte:
Copie o código do código da seguinte forma:
tecla de funçãoUp(e) {
if(navigator.appName == "Microsoft Internet Explorer")
{
var código-chave = event.keyCode;
var realkey = String.fromCharCode(event.keyCode);
}outro
{
var código-chave = e.qual;
var realkey = String.fromCharCode(e.qual);
}
alert("Código-chave: " + código-chave + " Caractere: " + chave real);
}
document.onkeyup = keyUp;
Um método mais simples é [2]:
Copie o código do código da seguinte forma:
tecla de funçãoUp(e) {
var currKey=0,e=e||evento;
currKey=e.keyCode||e.qual||e.charCode;
var keyName = String.fromCharCode(currKey);
alert("Código chave: " + currKey + " Caractere: " + keyName);
}
document.onkeyup = keyUp;
O método acima é mais inteligente. Deixe-me explicar brevemente:
Primeiro de tudo, o código e=e||event é para compatibilidade com aquisição de objeto de evento do navegador. O significado deste código em js é que se a variável oculta e existir no FireFox ou Opera, então e||event retornará e. Se a variável oculta e não existir no IE, então o evento será retornado.
Em segundo lugar, currKey=e.keyCode | Existem atributos which e charCode no Opera, e existem atributos keyCode e which no Opera.
O código acima é compatível apenas com o navegador, obtém o objeto de evento keyup e simplesmente exibe o código-chave e os caracteres-chave. No entanto, surge um problema quando você pressiona uma tecla, as teclas dos caracteres ficam todas em maiúsculas. pressione a tecla shift, os caracteres são muito estranhos, então o código precisa ser otimizado.
Parte 3: Implementação e Otimização de Código
3.1 Códigos-chave e códigos de caracteres para eventos-chave
Os códigos-chave e os códigos de caracteres dos eventos-chave não têm portabilidade entre navegadores. Para navegadores diferentes e eventos de caso diferentes, os métodos de armazenamento dos códigos-chave e dos códigos de caracteres são diferentes.....
No IE, existe apenas um atributo keyCode e sua interpretação depende do tipo de evento. Para keydown, keyCode armazena o código da tecla. Para eventos de pressionamento de tecla, keyCode armazena um código de caractere. Não há atributos which e charCode no IE, portanto os atributos which e charCode são sempre indefinidos.
O keyCode no FireFox é sempre 0. Quando o tempo é keydown/keyup, charCode=0, que é o código da chave. Quando ocorre o pressionamento da tecla do evento, os valores de which e charCode são iguais e o código do caractere é armazenado.
No Opera, os valores de keyCode e que são sempre iguais No evento keydown/keyup, eles armazenam o código da tecla. No momento em que pressionam a tecla, eles armazenam o código do caractere, e charCode não é definido e é sempre indefinido.
3.2 Use keydown/keyup ou keypress
A primeira parte introduziu a diferença entre keydown/keyup e keypress. Existe uma regra geral de que o evento keydown é mais útil para teclas de função, enquanto o evento keypress é mais útil para teclas imprimíveis [3].
O registro do teclado é principalmente para caracteres imprimíveis e algumas teclas de função, portanto keypress é a primeira escolha. No entanto, como mencionado na primeira parte, keypress no IE não suporta teclas de função, portanto, eventos keydown/keyup devem ser usados para complementá-lo.
3.3 Implementação do código
A ideia geral é usar o objeto de evento keypress para obter caracteres-chave e usar o evento keydown para obter caracteres de função, como Enter, Backspace, etc.
A implementação do código é a seguinte
Copie o código do código da seguinte forma:
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD><TITLE>gravação de pressionamento de tecla js</TITLE>
<META NAME="Gerador" CONTENT="EditPlus">
<META NAME="Autor" CONTENT="Yu Shangren">
<META NAME="Palavras-chave" CONTENT="gravação de pressionamento de tecla js">
<META NAME="Descrição" CONTENT="gravação de pressionamento de tecla js">
</HEAD>
<CORPO>
<script type="texto/javascript">
var keystring = "";//grava a string da chave
função $(s){retornar document.getElementById(s)?document.getElementById(s):s;}
pressionamento de tecla de função (e)
{
var currKey=0,CapsLock=0,e=e||evento;
currKey=e.keyCode||e.qual||e.charCode;
CapsLock=currKey>=65&&currKey<=90;
switch(currKey)
{
//Bloqueia backspace, tab, retorno de carro, espaço, teclas de direção e teclas de exclusão
case 8: case 9:case 13:case 32:case 37:case 38:case 39:case 40:case 46:keyName = "";break;
padrão:keyName = String.fromCharCode(currKey);
}
keystring += nomechave;
}
tecla de função pressionada (e)
{
var e=e||evento;
var currKey=e.keyCode||e.qual||e.charCode;
if((currKey>7&&currKey<14)||(currKey>31&&currKey<47))
{
switch(currKey)
{
caso 8: keyName = "[Backspace]";
caso 9: keyName = "[Tabulação]";
case 13:keyName = "[Enter]";
case 32:keyName = "[espaço]";
case 33:keyName = "[PageUp]";
case 34:keyName = "[PageDown]";
case 35:keyName = "[Fim]";
case 36:keyName = "[Home]";
case 37:keyName = "[tecla de seta para a esquerda]";
case 38:keyName = "[tecla de seta para cima]";
case 39:keyName = "[tecla de seta para a direita]";
case 40:keyName = "[tecla de seta para baixo]";
case 46:keyName = "[Excluir]";
padrão:keyName = "";
}
keystring += nomechave;
}
$("conteúdo").innerHTML=keystring;
}
tecla de função (e)
{
$("conteúdo").innerHTML=keystring;
}
document.onkeypress=keypress;
document.onkeydown=keydown;
document.onkeyup =keyup;
</script>
<input type="texto" />
<input type="button" value="Limpar registros" onclick="$('content').innerHTML = '';keystring = '';"/>
<br/>Pressione qualquer tecla para visualizar o valor da chave de resposta do teclado: <span id="content"></span>
</BODY>
</HTML>
Análise de código:
$(): Obtenha dom com base no ID
keypress(e): implementa a interceptação de códigos de caracteres. Como as teclas de função precisam ser obtidas usando keydown, essas teclas de função são bloqueadas ao pressionar a tecla.
keydown(e): Realiza principalmente a aquisição de teclas de função.
keyup(e): exibe a string interceptada.