javascript - prevent - Compruebe si una tecla está desactivada

prevent click javascript

Question

¿Hay alguna manera de detectar si una clave está actualmente inactiva en JavaScript?

Sé sobre el evento "keydown", pero eso no es lo que necesito. Algún tiempo DESPUÉS de presionar la tecla, deseo poder detectar si aún está presionado.

PD: El mayor problema parece ser que después de un período de tiempo, la tecla comienza a repetirse, disparando eventos de keydown y keyup como un demonio. Afortunadamente solo hay una función isKeyDown (clave) simple, pero si no, entonces este problema deberá ser superado / reparado.

Answer 1

¿Hay alguna manera de detectar si una clave está actualmente inactiva en JavaScript?

Nop. La única posibilidad es monitorear cada keyup y keydown y recordar.

después de un período de tiempo, la tecla comienza a repetirse, disparando eventos de keydown y keyup como un demonio.

No debería. Definitivamente obtendrá la repetición de keypress , y en muchos navegadores también obtendrá repetidos keydown , pero si se repite, se trata de un error.

Desafortunadamente no es un error completamente inaudito: en Linux, Chromium y Firefox (cuando se está ejecutando bajo GTK +, que está en distribuciones populares como Ubuntu) ambos generan secuencias repetitivas keyup-keypress-keydown para claves retenidas, que son imposibles de distinguir de alguien que martillea la tecla realmente rápido.

Answer 2

Además de utilizar keyup y keydown para rastrear cuándo baja y vuelve la tecla, en realidad hay algunas propiedades que le indican si ciertas teclas están caídas.

window.onmousemove = function (e) {
  if (!e) e = window.event;
  if (e.shiftKey) {/*shift is down*/}
  if (e.altKey) {/*alt is down*/}
  if (e.ctrlKey) {/*ctrl is down*/}
  if (e.metaKey) {/*cmd is down*/}
}

Esto está disponible en todos los objetos de evento generados por el navegador, como los de keydown , keyup y keypress , para que no tenga que usar mousemove.

Intenté generar mis propios objetos de evento con document.createEvent(''KeyboardEvent'') y document.createEvent(''KeyboardEvent'') y buscando e.shiftKey y e.shiftKey , pero no tuve suerte.

Estoy usando Chrome 17 en Mac

Answer 3

El siguiente código es lo que estoy usando:

var altKeyDownCount = 0;
window.onkeydown = function (e) {
    if (!e) e = window.event;
    if (e.altKey) {
        altKeyDownCount++;
        if (30 < altKeyDownCount) {
            $(''.key'').removeClass(''hidden'');
            altKeyDownCount = 0;
        }
        return false;
    }
}

window.onkeyup = function (e) {
    if (!e) e = window.event;
    altKeyDownCount = 0;
    $(''.key'').addClass(''hidden'');
}

Cuando el usuario mantiene presionada la tecla Alt durante algún tiempo (alrededor de 2 segundos), aparece un grupo de etiquetas (clase = ''clave oculta''). Cuando se suelta la tecla Alt, las etiquetas desaparecen. jQuery y Bootstrap son ambos usados.

Answer 4

Mi solución:

var keys = {};
window.onkeyup = function(e) { keys[e.keyCode] = false; }
window.onkeydown = function(e) { keys[e.keyCode] = true; }

Ahora puedo verificar si se presiona cualquier tecla en cualquier otro lugar del guión marcando

keys["code of the key"]

Si es verdad, la tecla está presionada.

Answer 5

Mire this respuesta, y use onkeyup y onkeydown . Here hay información más específica sobre esos eventos.

Answer 6

No creo que haya nada como una función isKeyDown, pero podrías escribir la tuya.

Básicamente, crea una matriz cuya longitud es la cantidad de claves que deseas monitorear. Luego, usando los documentos / páginas / controles de los eventos keyUp y keyDown, actualice la matriz con el estado de esa clave.

Luego, escriba una función que verifique si una determinada tecla está inactiva y devuelve un bool.

var keyEnum = { W_Key:0, A_Key:1, S_Key:2, D_Key:3 };
var keyArray = new Array(4);

function onKeyDown()
{
    // Detect which key was pressed
    if( key == ''w'' )
        keyArray[keyEnum.W_Key] = true;
    // Repeat for each key you care about...
}

function onKeyUp()
{
    // Detect which key was released
    if( key == ''w'' )
        keyArray[keyEnum.W_Key] = false;
    // Repeat for each key you care about...
}

function isKeyDown(key)
{
    return keyArray[key];
}

Eso debería lograr lo que quieres.

Answer 7

Otras personas han hecho este tipo de preguntas antes (aunque no veo ningún engaño obvio aquí en este momento).

Creo que la respuesta es que el evento keydown (y su keyup gemela) es toda la información que obtienes. La repetición está bien conectada al sistema operativo, y un programa de aplicación no tiene mucha oportunidad de consultar el BIOS para conocer el estado real de la clave.

Lo que puede hacer, y tal vez debe hacerlo si necesita hacerlo funcionar, es des-botar la clave mediante programación. Esencialmente, puede evaluar el keydown y la keyup usted mismo, pero ignorar un evento de keyup si ocurre demasiado rápido después del último keydown ... o esencialmente, debe retrasar su respuesta a keyup tiempo suficiente para asegurarse de que no haya otro evento keydown seguido de algo como 0.25 segundos de la keyup .

Esto implicaría el uso de una actividad de temporizador y la grabación en milisegundos de eventos anteriores. No puedo decir que sea una solución muy atractiva, pero ...

Answer 8

Sé que esta es una pregunta muy antigua, sin embargo, hay una biblioteca de JavaScript muy liviana (~ .5 KB) que "parchea" de forma efectiva la activación incoherente de los manejadores de eventos del teclado cuando se utiliza la DOM API.

La biblioteca es Keydrown .

Esta es la muestra del código operativo que funcionó bien para mis propósitos, simplemente cambiando la clave para configurar el oyente:

kd.P.down(function () {
  console.log(''The "P" key is being held down!'');
});

kd.P.up(function () {
  console.clear();
});

// This update loop is the heartbeat of Keydrown
kd.run(function () {
  kd.tick();
});

Incorporé Keydrown en mi JavaScript del lado del cliente para una animación de pausa adecuada en un juego de Red Light Green Light que estoy escribiendo. Puedes ver el juego completo here . (Nota: si estás leyendo esto en el futuro, el juego debería ser un código completo y jugable :-D!)

Espero que esto ayude.

Answer 9

Terminamos aquí para verificar si ya había algo incorporado al navegador, pero parece que no. Esta es mi solución (muy similar a la respuesta de Robert):

"use strict";

let is_key_down = (() => {
    let state = {};

    window.addEventListener(''keyup'', (e) => state[e.key] = false);
    window.addEventListener(''keydown'', (e) => state[e.key] = true);

    return (key) => state.hasOwnProperty(key) && state[key] || false;
})();

Luego puede verificar si se presiona una tecla con is_key_down(''ArrowLeft'') .

Answer 10

$(''#mytextbox'').keydown(function (e) {
            if (e.keyCode == 13) {
                if (e.altKey) {
                    alert("alt is pressed");
                }
            }
 });

si presiona alt + enter, verá la alerta.

Answer 11

/*
Tracks what keys are currently down on the keyboard
*/

function keyboard_module(onUpdate){
    var kb = {};
    var unicode_mapping = {};
    document.onkeydown = function(e){
        var unicode=e.charCode? e.charCode : e.keyCode
        var key = getKey(unicode);
        kb[key] = true;
        if(onUpdate){
            onUpdate(kb);
        }
    }

    document.onkeyup = function(e){
        var unicode=e.charCode? e.charCode : e.keyCode
        var key = getKey(unicode);
        delete kb[key];
        if(onUpdate){
            onUpdate(kb);
        }
    }

    function getKey(unicode){
        if(unicode_mapping[unicode]){
            var key = unicode_mapping[unicode];
        }else{
            var key= unicode_mapping[unicode] = String.fromCharCode(unicode);
        }
        return key;
    }
    return kb;
}

function testing(kb){
    console.log(''These are the down keys'', kb);
}


var keyboard = keyboard_module(testing);

....
//somewhere else in the code
if(keyboard[''K'']){/*do something special */}