Skip to content

Instantly share code, notes, and snippets.

@rpragana

rpragana/Mousetrap.md

Created December 13, 2017 16:41
Show Gist options
  • Save rpragana/82582d76da54872c3caad8b5fad235f5 to your computer and use it in GitHub Desktop.
Save rpragana/82582d76da54872c3caad8b5fad235f5 to your computer and use it in GitHub Desktop.
Download ZIP
Mousetrap
Raw
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Uma página HTML</title>
<style>
@keyframes pisca {
0% {background-color: blue;}
50% {background-color: yellow;}
100% {background-color: blue;}
}
div {
width: 100px;
height: 30px;
background-color: blue;
}
.divanim {
animation-name: pisca;
animation-duration: 0.5s;
}
</style>
<script src="mousetrap.min.js"></script>
</head>
<body>
<h1>Testes com Mousetrap</h1>
<p>Alguns eventos de teclado com Mousetrap.</p>
<input id="inp1"></input>
<input id="inp2"></input>
<div></div>
<script>
Mousetrap(document.querySelector("#inp1")).bind("s",function(){
console.log("MTrap: s inp1");
});
Mousetrap(document.querySelector("#inp2")).bind("s",function(){
console.log("MTrap: s inp2");
});
Mousetrap.bind("s",function(){
var elem = document.querySelector("div");
console.log("MTrap: s document");
elem.classList.remove("divanim");
// força redefinir layout do elemento
// https://gist.github.com/paulirish/5d52fb081b3570c81e3a
elem.clientWidth;
elem.classList.add("divanim");
});
Mousetrap.bind("ctrl+alt+z", function(){
console.log("Combinação: ctrl+alt+z");
})
Mousetrap.bind("shift+z", function(){
console.log("Combinação: shift+z");
})
Mousetrap.bind("q w e r", function(){
console.log("Detectada sequência: q w e r");
})
</script>
</body>
</html>
Raw
Mousetrap.md

Uma biblioteca para associar comandos de teclas, (simples ou combinadas, sequências, dependentes do elemento) a uma função para cada "binding".

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment