JSFiddle - React, Tailwind, and code Playground

by Brad Christie

HTML

<p>Control: <span id="key-control"></span></p>
<p>Key: <span id="key-key"></span></p>
<p>Status: <span id="key-status"></span></p>

<textarea rows="10" cols="10" id="blah">
</textarea>

JavaScript

$.ctrl = function(key, callback, args) {
    $(document).keydown(function(e) {
        if(!args) args=[]; // IE barks when args is null
        if(e.keyCode == key.charCodeAt(0) && e.ctrlKey) {
            callback.apply(this, args);
            return false;
        }
    });
};
$.fn.ctrl = function(key, callback, args) {
    $(this).keydown(function(e) {
        if(!args) args=[]; // IE barks when args is null
        if(e.keyCode == key.charCodeAt(0) && e.ctrlKey) {
            callback.apply(this, args);
            return false;
        }
    });
};

$.ctrl('C',function(){
    $('#key-status').text('Copied!');
});
$.ctrl('D',function(){
    $('#key-status').text('Bookmarked!');
});
$.ctrl('S',function(){
    $('#key-status').text('Saved!');
});
$.ctrl('X',function(){
    $('#key-status').text('Cut!');
});
$.ctrl('V',function(){
    $('#key-status').text('Pasted!');
});
$('#blah').ctrl('T',function(){
    $('#blah').val('Timestamp!');
});