JSFiddle - React, Tailwind, and code Playground

by Eric Hynds

HTML

<input name="foo" />

JavaScript

/**
 * This script wraps $.fn.bind to add some syntaxic sugar.
 */

(function() {

    // define key mappings. remember that keypress gives you the
    // character entered, while keyup/keydown gives you the
    // key that was pressed. if you care about both and they're
    // different, define them as an array.
    var keys = $.keys = {
        "enter": 13
        , "esc": 27
        , "home": 36
        , "left": 37
        , "right": 39
        , "up": 38
        , "down": 40
        , "tab": 9
        , "del": 46
        , "space": 32
        , "a": [65, 97]
        , "b": 66
        
        // only use key combos within a keypress handler
        , "ctrl+c": 3
    };

    var handlers = [];
    
    function parse( type ){
        var parts = type.split(":");
        
        return {
            type: parts[0],
            filters: parts[1].replace(/\s+/g, "")
        }
    }
    
    $.fn.keybind = function(type, data, fn) {
        if (type.indexOf(":") === -1) {
            return $.fn.bind.apply(this, arguments);
        }
        
        if (typeof fn === "undefined" || data === false) {
            fn = data;
            data = undefined;
        }

        var parsed = parse( type );
        var filters = parsed.filters;
        type = parsed.type;
        
        this.each(function(){
            handlers[ handlers.length ] = {
                elem: this,
                type: type,
                filters: filters  
            };
        });
        
        return $.fn.bind.call(this, type, data, function(event) {
            var args = arguments;

            $.each(filters.split(","), $.proxy(function( i, filter ) {
                var code = keys[filter];

                if ((typeof code === "object" && $.inArray(event.which, code) > -1) || code === event.which) {
                    fn.apply(this, args);
                    return false;
                }
            }, this));
        });
    };
    
    
    $.fn.unkeybind =...