Vamos primeiro entender as diferenças entre cada evento
KeyDown: ocorre quando a chave é pressionada quando o controle tem foco
Keypress: ocorre quando a tecla é pressionada quando o controle tem foco
KeyUp: ocorre quando a chave é liberada quando o controle tem foco
1. KeyPress é usado principalmente para receber caracteres da ANSI, como letras e números. Os processos de eventos KeyDown e KeyUp geralmente podem capturar todas as chaves no teclado, exceto o PRSCRN (as teclas especiais para teclados especiais não são discutidas aqui.
2. KeyPress pode capturar apenas um único caractere, enquanto KeyDown e KeyUp podem capturar uma combinação de teclas.
3. KeyPress não exibe o estado físico do teclado (tecla de mudança), mas apenas passa um caractere. A KeyPress interpreta as formas superior e minúscula de cada caractere como diferentes códigos de chave, ou seja, como dois caracteres diferentes. KeyDown e KeyUp não podem determinar o tamanho das letras do valor-chave. KeyDown e KeyUp interpretam a forma superior e a forma minúscula de cada caractere com dois parâmetros: KeyCode - exibe a chave física (retorna a e a como a mesma chave) e Shift - indica o status da tecla Shift + e retorna A ou A de um de eles.
5. O KeyPress não distingue entre caracteres numéricos do teclado e o teclado primário, enquanto o keydown e o keyup distinguem entre os caracteres numéricos do teclado e o teclado primário.
6. Os eventos KeyDown e KeyUp ocorrem quando (keydown) ou liberação (keyup) uma chave. Como as teclas do teclado geralmente são empurradas imediatamente (isso é diferente do mouse), não há muita diferença entre quais desses dois eventos. Além disso, há outra diferença entre a UP e os outros dois: para julgar o estado modificado da chave, deve ser usado.
Podemos usar o evento KeyDown para bloquear a entrada do usuário, por exemplo, um determinado campo de entrada só pode inserir números
Keycode das teclas numéricas no teclado
[48-57] chaves numéricas
[96-105] Teclado numérico
Também permita a exclusão da chave do backspace
O código é o seguinte
A cópia do código é a seguinte:
var input = document.getElementById ('número_ipt')
input.onkeydown = function (e) {
var keycode = e.KeyCode
if (! isNumber (Keycode)) retornar false
}
// apenas números podem ser inseridos
função isNumber (KeyCode) {
// número
if (keycode> = 48 && keycode <= 57) retorna true
// teclado numérico pequeno
if (keycode> = 96 && keycode <= 105) retorna true
// Chave do backspace
if (keycode == 8) retorna true
retornar falso
}