Cette thématique est rarement abordée, mais je trouve qu’il est intéressant d’ajouter des raccourcis clavier à votre application. Il existe des plugin qui le font déjà, mais back to basics, regardons comment on le fait avec du Javascript pur
Ecouter les touches alpha numérique de base
document.addEventListener('keydown', function (event) {
if (event.key === 'a') {
//votre code javascript ici
}
if (event.key === 'd') {
//votre code javascript ici
}
});
Il est assez simple d’ajouter un listener, mais l’astuce est de le faire sur l’élément document, comme ça, ça concernera toute votre page et on utilisera la délégation d’événement.
Ecouter les touches spéciales
document.addEventListener('keydown', function (event) {
// CTRL + D combo
if (event.ctrlKey && event.key === 'd') {
//votre code
}
// CTRL + L combo
if (event.ctrlKey && event.key === 'l') {
//votre code
}
});
Eviter les conflits avec les autres raccourcis clavier de votre navigateur, par exemple sur Windows ou Linux, CTRL + D sert à bookmarker une page, pour éviter cela on va utiliser le célèbre preventDefault !!
document.addEventListener('keydown', function (event) {
event.preventDefault()
// CTRL + D combo
if (event.ctrlKey && event.key === 'd') {
//votre code
}
// CTRL + L combo
if (event.ctrlKey && event.key === 'l') {
//votre code
}
});
Les autres touches péciales Alt, Shift etc
alt : event.altKey shift : event.shiftKey