• Keypress.js

    1. Keypress, c'est quoi ?

    C'est tout simplement une bibliothèque javascript qui vous permet d'intercepter toutes les touches pressées au clavier et d'effectuer une action en conséquence.

    Exemple: Utilisez les flèches du clavier pour déplacer le cadre rouge.

     

    2. Mise en place

    Comme toujours, il faut charger un script. Téléchargez keypress-2.0.3.min.js et enregistrez le parmi les fichiers de votre blog. 

    Récupérez l'url du fichier puis chargez le comme ceci:

    <script src="url de keypress-2.0.3.min.js"></script>

    3. Utilisation

    Exemple 1:Faire une action lorsqu'une touche est pressée

    <script>
    onJSFilesLoaded.push(function(){
        var listener = new window.keypress.Listener();listener.simple_combo("b", function() {
        alert ("Vous avez pressé la touche b");
       });
    });</script>

    Ce code est très simple. Lors de l'appui sur la touche b, une fonction de callback est appelée et dans notre cas, elle affiche une fenêtre qui nous dit que l'on a appuyé sur la touche b.

    Exemple 2: Détecter une combinaison de touches

    Il est tout aussi possible de détecter une combinaison de touches par exemple Maj+l (faites l'essai). Dans ce cas on écrira:

    var listener = new window.keypress.Listener();listener.simple_combo("shift l", function() {
       alert ('Bravo vous avez bien suivi :)');
       });
    

    Exemple3: Compter le nombre de pressions

    Si vous appuyez sur Maj et m, alors je vous dit que vous l'avez fait 0 fois

    var listn=new window.keypress.Listener();listener.counting_combo("shift m", function(e, count) {
        $('n').innerHTML= count;
    });
    

    Exemple 4: Réagir à une séquence

    Appuyez successivement sur les touches a b c d e f puis la touche entrée pour voir apparaître un message.

    var listx=new window.keypress.Listener();listener.sequence_combo("a b c d e f enter", function() {
       $('hiddendiv').setStyle("display",'block');
    }, true);
    

    Je ne vous ai donné qu'un apperçu de Keypress mais sachez qu'il existe d'autres possibilités et options sur la page officielle de Keypress

    Pour une liste complète des touches, suivez ce lien:https://github.com/dmauro/Keypress/blob/master/keypress.coffee#L728-864


  • Commentaires

    Aucun commentaire pour le moment

    Suivre le flux RSS des commentaires

    Vous devez être connecté pour commenter