JSFiddle - React, Tailwind, and code Playground

by AaronLayton

HTML

<script src="http://cloud.github.com/downloads/RobertWHurst/KeyboardJS/keyboard.0.2.2.min.js"></script>
<div id="output">

</div>


<a href="#products" data-shortcut="ctrl+i">Products</a>
<a href="#products" title="Save" data-shortcut="ctrl+s">Products</a>

JavaScript

// KeyboardJS.bind.key(keyCombo, onDownCallback, onUpCallback);

/* KeyboardJS.bind.key( "ctrl+q" , function(){
    $('#output').append("Pressed<br />");
});
*/

$('[data-shortcut]').each(function(i,e){

    var elm = e;    // Make local 
    
    console.log(elm);

    // KeyboardJS.bind.key(keyCombo, onDownCallback, onUpCallback);
    KeyboardJS.bind.key( $(elm).data('shortcut') , function(){
        $('#output').append("Shortcut<br />");
        $(elm).click();
        console.log(elm);
    });

    // Add to the title tag to show the shortcut on hover
    var newTitle = $(elm).attr('title');
    if (newTitle !== undefined){
        $(elm).attr('title', newTitle + " (" + $(elm).data('shortcut') + ")")
    }else{
        $(elm).attr('title', "(" + $(elm).data('shortcut') + ")")
    }
});