Parte 1: eventos clave del navegador
Para implementar el registro de teclas con js, debe prestar atención a los tres tipos de eventos clave del navegador, a saber, keydown, keypress y keyup, que corresponden a los tres identificadores de eventos de onkeydown, onkeypress y onkeyup respectivamente. Una pulsación de tecla típica generará los tres eventos, en orden pulsación de tecla, pulsación de tecla y luego pulsación de tecla cuando se suelta la tecla.
Entre estos tres tipos de eventos, la pulsación y la pulsación de tecla son de nivel relativamente bajo, mientras que la pulsación de tecla es relativamente avanzada. El llamado avanzado aquí significa que cuando el usuario presiona shift + 1, la pulsación de tecla analiza el evento clave y devuelve un carácter "!" imprimible, mientras que keydown y keyup solo registran el evento shift + 1. [1]
Sin embargo, la pulsación de tecla solo es efectiva para algunos caracteres que se pueden imprimir. Para las teclas de función, como F1-F12, Retroceso, Entrar, Escape, RePág, AvPág y direcciones de flecha, no se generará el evento de pulsación de tecla, sino la pulsación de tecla y la tecla arriba. puede generarse un evento. Sin embargo, en Firefox, las teclas de función pueden generar eventos de pulsación de teclas.
Los objetos de evento pasados a los controladores de eventos keydown, keypress y keyup tienen algunas propiedades comunes. Si se presiona Alt, Ctrl o Shift junto con una tecla, esto se representa mediante las propiedades altKey, ctrlKey y shiftKey del evento, que son comunes a FireFox e IE.
Segunda parte: navegadores compatibles
Cualquier js que involucre navegadores debe considerar problemas de compatibilidad del navegador.
Actualmente, los navegadores más utilizados se basan principalmente en IE y Mozilla. Maxthon se basa en el kernel de IE, mientras que Firefox y Opera se basan en el kernel de Mozilla.
2.1 Inicialización de eventos
Lo primero que necesita saber es cómo inicializar el evento. La declaración básica es la siguiente:
tecla de funciónAbajo(){}
documento.onkeydown = keyDown;
Cuando el navegador lea esta declaración, llamará a la función KeyDown() sin importar qué tecla se presione en el teclado.
2.2 Métodos de implementación de Firefox y Opera
La implementación de programas como Firefox y Opera es más problemática que IE, así que lo describiré aquí primero.
La función keyDown() tiene una variable oculta; generalmente, usamos la letra "e" para representar esta variable.
tecla de funciónAbajo(e)
La variable e representa un evento de pulsación de tecla. Para encontrar qué tecla se presionó, use el atributo what:
e.cual
e.que dará el valor del índice de la clave. El método para convertir el valor del índice en el valor alfanumérico de la clave requiere el uso de la función estática String.fromCharCode(), de la siguiente manera:
String.fromCharCode(e.cual)
Al juntar las declaraciones anteriores, podemos obtener qué tecla se presionó en FireFox:
Copie el código de código de la siguiente manera:
tecla de funciónAbajo(e) {
var código clave = e.cual;
var realkey = String.fromCharCode(e.cual);
alert("Código clave: " + código clave + " Carácter: " + clave real);
}
documento.onkeydown = keyDown;
2.3 Método de implementación de IE
El programa de IE no necesita la variable e. Utilice window.event.keyCode en lugar de e.what. El método para convertir el valor del índice clave en el valor clave real es similar: String.fromCharCode(event.keyCode). es el siguiente:
Copie el código de código de la siguiente manera:
tecla de funciónAbajo() {
var código clave = evento.keyCode;
var realkey = String.fromCharCode(event.keyCode);
alert("Código clave: " + código clave + " Carácter: " + clave real);
}
documento.onkeydown = keyDown;
2.4 Determinar el tipo de navegador
Hemos aprendido anteriormente cómo obtener el objeto de evento clave en varios navegadores. Luego debemos determinar el tipo de navegador. Hay muchos métodos, algunos son más fáciles de entender y también hay métodos muy inteligentes. : es decir, use el atributo appName del objeto del navegador. Por supuesto, también puede usar el atributo userAgent. Aquí, appName se usa para determinar el tipo de navegador. El nombre de aplicación de IE y Maxthon es "Microsoft Internet Explorer". Y el nombre de la aplicación de Firefox y Opera es "Netscape", por lo que un código con una función relativamente simple es el siguiente:
Copie el código de código de la siguiente manera:
tecla de funciónArriba(e) {
if(navigator.appName == "Microsoft Internet Explorer")
{
var código clave = evento.keyCode;
var realkey = String.fromCharCode(event.keyCode);
}demás
{
var código clave = e.cual;
var realkey = String.fromCharCode(e.cual);
}
alert("Código clave: " + código clave + " Carácter: " + clave real);
}
documento.onkeyup = keyUp;
Un método más simple es [2]:
Copie el código de código de la siguiente manera:
tecla de funciónArriba(e) {
var currKey=0,e=e||evento;
currKey=e.keyCode||e.cual||e.charCode;
var keyName = String.fromCharCode(currKey);
alert("Código clave: " + currKey + " Carácter: " + keyName);
}
documento.onkeyup = keyUp;
El método anterior es más inteligente. Déjame explicarlo brevemente:
En primer lugar, el código e=e||event es para compatibilidad con la adquisición de objetos de eventos del navegador. El significado de este código en js es que si la variable oculta e existe en FireFox u Opera, entonces e||event devuelve e. Si la variable oculta e no existe en IE, entonces se devuelve el evento.
En segundo lugar, currKey=e.keyCode | Hay atributos which y charCode en Opera, y hay atributos keyCode y what en Opera.
El código anterior solo es compatible con el navegador, obtiene el objeto de evento keyup y simplemente muestra el código clave y los caracteres clave. Sin embargo, surge un problema cuando presiona una tecla, todas las teclas de caracteres están en mayúsculas. presione la tecla Mayús, los caracteres son muy extraños, por lo que es necesario optimizar el código.
Parte 3: Implementación y optimización del código
3.1 Códigos clave y códigos de caracteres para eventos clave
Los códigos clave y los códigos de caracteres de los eventos clave carecen de portabilidad entre navegadores. Para diferentes navegadores y diferentes eventos de casos, los métodos de almacenamiento de los códigos clave y los códigos de caracteres son diferentes.....
En IE, solo hay un atributo keyCode y su interpretación depende del tipo de evento. Para presionar una tecla, keyCode almacena el código de tecla. Para eventos de pulsación de tecla, keyCode almacena un código de carácter. No hay atributos which y charCode en IE, por lo que los atributos which y charCode siempre están indefinidos.
El keyCode en FireFox es siempre 0. Cuando el tiempo es keydown/keyup, charCode=0, que es el código clave. Cuando se produce el evento de pulsación de tecla, cuyos valores y charCode son los mismos, y se almacena el código de carácter.
En Opera, los valores de keyCode y que son siempre los mismos. En el evento keydown/keyup, almacenan el código de tecla. En el momento de presionar la tecla, almacenan el código de carácter, y charCode no está definido y siempre está indefinido.
3.2 Usar keydown/keyup o keypress
La primera parte ha introducido la diferencia entre keydown/keyup y keypress. Existe una regla general de que el evento keydown es más útil para las teclas de función, mientras que el evento keypress es más útil para las teclas imprimibles [3].
El registro del teclado es principalmente para caracteres imprimibles y algunas teclas de función, por lo que presionar una tecla es la primera opción. Sin embargo, como se mencionó en la primera parte, la presión de tecla en IE no admite teclas de función, por lo que se deben usar eventos de pulsación/activación de teclas para complementarlo.
3.3 Implementación del código
La idea general es utilizar el objeto de evento de pulsación de tecla para obtener caracteres clave y utilizar el evento de pulsación de tecla para obtener caracteres de función, como Intro, Retroceso, etc.
La implementación del código es la siguiente.
Copie el código de código de la siguiente manera:
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transicional//ES">
<HTML>
<HEAD><TITLE>grabación de pulsaciones de teclas js</TITLE>
<META NAME="Generador" CONTENT="EditPlus">
<META NAME="Autor" CONTENT="Yu Shangren">
<META NAME="Palabras clave" CONTENT="grabación de pulsaciones de teclas js">
<META NAME="Descripción" CONTENT="grabación de pulsaciones de teclas js">
</CABEZA>
<CUERPO>
<tipo de script="texto/javascript">
var keystring = "";//Registrar cadena de clave
función $(s){return document.getElementById(s)?document.getElementById(s):s;}
pulsación de tecla de función (e)
{
var currKey=0,BloqMayús=0,e=e||evento;
currKey=e.keyCode||e.cual||e.charCode;
BloqMayús=clavecurr>=65&&clavecurr<=90;
cambiar (clave actual)
{
//Bloquear teclas de retroceso, tabulación, retorno de carro, espacio, teclas de dirección y teclas de eliminación
caso 8: caso 9:caso 13:caso 32:caso 37:caso 38:caso 39:caso 40:caso 46:keyName = "";break;
predeterminado:keyName = String.fromCharCode(currKey);
}
cadena de claves += nombre de clave;
}
tecla de función (e)
{
var e=e||evento;
var currKey=e.keyCode||e.what||e.charCode;
if((currKey>7&&currKey<14)||(currKey>31&&currKey<47))
{
cambiar (clave actual)
{
caso 8: keyName = "[Retroceso]";
caso 9: keyName = "[Tabulación]";
caso 13:keyName = "[Entrar]";
caso 32:keyName = "[espacio]";
caso 33:keyName = "[Re Pág]";
caso 34:keyName = "[PageDown]";
caso 35:keyName = "[Fin]";
caso 36:keyName = "[Inicio]";
caso 37:keyName = "[tecla de flecha izquierda]";
caso 38:keyName = "[tecla de flecha hacia arriba]";
caso 39:keyName = "[tecla de flecha hacia la derecha]";
caso 40:keyName = "[tecla de flecha hacia abajo]";
caso 46:keyName = "[Eliminar]";
predeterminado:keyName = ""; romper;
}
cadena de claves += nombre de clave;
}
$("contenido").innerHTML=cadena de claves;
}
tecla de función (e)
{
$("contenido").innerHTML=cadena de claves;
}
document.onkeypress=pulsación de tecla;
document.onkeydown =keydown;
document.onkeyup =keyup;
</script>
<tipo de entrada="texto" />
<input type="button" value="Borrar registros" onclick="$('content').innerHTML = '';keystring = '';"/>
<br/>Presione cualquier tecla para ver el valor de la clave de respuesta del teclado: <span id="content"></span>
</CUERPO>
</HTML>
Análisis de código:
$(): Obtener dom basado en ID
pulsación de tecla (e): implementa la interceptación de códigos de caracteres. Dado que las teclas de función deben obtenerse mediante la pulsación de teclas, estas teclas de función se bloquean al pulsarlas.
keydown (e): realiza principalmente la adquisición de teclas de función.
keyup(e): muestra la cadena interceptada.