web-dev-qa-db-fra.com

Exécuter le code JS après avoir appuyé sur la barre d'espace

c'est mon code en JavaScript:

var changeIdValue =  function(id, value) {
document.getElementById(id).style.height = value;
};

document.getElementById ("balklongwaarde").addEventListener("click", function(){ changeIdValue("balklongwaarde", "60px")});

document.getElementById ("balklevensverwachting").addEventListener("click", function(){ changeIdValue("balklevensverwachting", "60px")});

document.getElementById ("balkhart").addEventListener("click", function(){ changeIdValue("balkhart", "60px")});

document.getElementById ("balklever").addEventListener("click", function(){ changeIdValue("balklever", "60px")});

document.getElementById("balkhersenen").addEventListener("click", function(){ changeIdValue("balkhersenen", "60px")});

Je veux exécuter ce code après avoir appuyé sur keyup ....

Quelqu'un a une idée comment?

javascriptkeyup
16
user3771096
document.body.onkeyup = function(e){
    if(e.keyCode == 32){
        //your code
    }
}

Cela sera exécuté après avoir appuyé sur la barre d'espace.

JSFiddle .

39
nicael

Dans JQuery, les événements sont normalisés sous la propriété which event. 

Vous pouvez trouver n'importe quelle valeur de clé ici par exemple: valeur de barre d'espace (32).

Cette fonction peut vous aider. 

$(window).keypress(function(e) {
    if (e.which === 32) {

        //Your code goes here

    }
});
7
NNR

document.activeElement est l'élément qui a le focus. Vous trouverez souvent à la fois une barre d'espace et un clic de tir sur l'élément ciblé.

document.body.onkeyup = function(e){
    if(e.keyCode == 32 || e.keyCode == 13){
        //spacebar or enter clicks focused element
        try {
            doc.activeElement.click();
        }
        catch (e) {
            console.log(e);
        }            
    }
};

Alors le CSS pourrait être:

.focusable-thing:hover {
    cursor: pointer;
}
.focusable-thing:focus {
    -webkit-box-shadow: 0px 2px 8px 2px rgba(0,0,0,0.4);
    -moz-box-shadow: 0px 2px 8px 2px rgba(0,0,0,0.4);
    box-shadow: 0px 2px 8px 2px rgba(0,0,0,0.4);
}
0
Ron Royston