What is the method to obtain the keycode for a key combination in JavaScript?

Question

What is the method to obtain the keycode for a key combination in JavaScript?

    $(document).on('keydown', function(event) {

        performAction(event);
        event.preventDefault();
    });

By using the code above, I am successful in capturing the keycode for a single key press. However, when attempting to use a combination of keys, I am only receiving events for the first and second keys pressed. For example, !(Shift + 1), $(Shift + 4).

Is there a way to retrieve the keycode for combinations of keys?

javascript

Answer 1

Answer №1

Below are a couple of useful plugins that could be beneficial:

https://github.com/jvoight27/jquery.hotkeys
https://github.com/samrobbins/keymaster (this one does not have any dependencies)

Answer 2

Below are a couple of useful plugins that could be beneficial:

https://github.com/jvoight27/jquery.hotkeys
https://github.com/samrobbins/keymaster (this one does not have any dependencies)

Answer 3

Answer №2

If you want to enhance the functionality of jQuery's fn Object by incorporating a function that manages triggering callback functions based on key presses and Regex matching, there is a solution.

A while back, I created a similar response. Initially, it only supported regex matching for individual keys, but after some adjustments, it now accommodates multiple key combinations.

$.fn.selectedKey = (function () {
    var keys = "";
    var last = "";
    var key = "";
    return function (cb, data) {
        def.call(data, {
            ctrlKey: 2,
            altKey: 2,
            invert: 0,
            filter: /.*/,
            preventDefault: false
        });

        function validate(e) {
            var exp = new RegExp(e.data.filter.replace(/\\\\(\d)/g, String.fromCharCode("$1")));
            var c = !!(e.data.ctrlKey ^ e.ctrlKey ^ 1 > 0);
            var a = !!(e.data.altKey ^ e.altKey ^ 1 > 0);
            return (exp.test(keys) && (c && a));
        }

        function def(obj) {
            for (var prop in obj) {
                this[prop] = this[prop] || obj[prop];
            }
        }
        this.keypress(data, function (e) {
            key = e.char = String.fromCharCode(e.keyCode || e.which);
            keys += (!!~keys.indexOf(key)) ? "" : key;
            key = key["to" + (e.shiftKey ? "Upper" : "Lower") + "Case"]();
            keys = keys["to" + (e.shiftKey ? "Upper" : "Lower") + "Case"]();
            if (e.data.preventDefault) e.preventDefault();

            if ((validate(e) != e.data.invert) && keys != last) {
                cb(e);
                last = keys;
            }
        });
        if (!this.data("keyupBound")) {
            this.keyup(data, function (e) {
                key = e.char = String.fromCharCode(e.keyCode || e.which);
                var t = keys.toLowerCase().split("");
                t.splice(t.indexOf(e.char), 1);
                keys = t.join("");
                last = keys;
            });
            this.data("keyupBound", true);
        }
    };

})();

$("body").selectedKey(function (e) {
    console.log("All lowercase letters, numbers, and 'A': " + e.char);
}, {
    filter: "^[a-z]|[0-9]|A$",
    ctrlKey: 2,
    altKey: 2
});

$("body").selectedKey(function (e) {
    console.log("KeyCode 2 " + e.char); // Ctrl + b
}, {
    filter: "\\2",
    ctrlKey: 1,
    altKey: 2
});

You can also apply filter:/.{4,5}/ to trigger actions when any 4 to 5 keys are pressed simultaneously

For instance, the following code triggers when A + S + D are pressed together:

$("body").selectedKey(function (e) {
    console.log("ASD has been pressed");
}, {
    filter: "^ASD$",
    ctrlKey: 2,
    altKey: 2
});

Check out a functioning demo on JSBin

Edit Note: Resolved continuous triggering issue when holding keys if validation was true
Edit2: Corrected the usage of the last variable

Answer 4

If you want to enhance the functionality of jQuery's fn Object by incorporating a function that manages triggering callback functions based on key presses and Regex matching, there is a solution.

A while back, I created a similar response. Initially, it only supported regex matching for individual keys, but after some adjustments, it now accommodates multiple key combinations.

$.fn.selectedKey = (function () {
    var keys = "";
    var last = "";
    var key = "";
    return function (cb, data) {
        def.call(data, {
            ctrlKey: 2,
            altKey: 2,
            invert: 0,
            filter: /.*/,
            preventDefault: false
        });

        function validate(e) {
            var exp = new RegExp(e.data.filter.replace(/\\\\(\d)/g, String.fromCharCode("$1")));
            var c = !!(e.data.ctrlKey ^ e.ctrlKey ^ 1 > 0);
            var a = !!(e.data.altKey ^ e.altKey ^ 1 > 0);
            return (exp.test(keys) && (c && a));
        }

        function def(obj) {
            for (var prop in obj) {
                this[prop] = this[prop] || obj[prop];
            }
        }
        this.keypress(data, function (e) {
            key = e.char = String.fromCharCode(e.keyCode || e.which);
            keys += (!!~keys.indexOf(key)) ? "" : key;
            key = key["to" + (e.shiftKey ? "Upper" : "Lower") + "Case"]();
            keys = keys["to" + (e.shiftKey ? "Upper" : "Lower") + "Case"]();
            if (e.data.preventDefault) e.preventDefault();

            if ((validate(e) != e.data.invert) && keys != last) {
                cb(e);
                last = keys;
            }
        });
        if (!this.data("keyupBound")) {
            this.keyup(data, function (e) {
                key = e.char = String.fromCharCode(e.keyCode || e.which);
                var t = keys.toLowerCase().split("");
                t.splice(t.indexOf(e.char), 1);
                keys = t.join("");
                last = keys;
            });
            this.data("keyupBound", true);
        }
    };

})();

$("body").selectedKey(function (e) {
    console.log("All lowercase letters, numbers, and 'A': " + e.char);
}, {
    filter: "^[a-z]|[0-9]|A$",
    ctrlKey: 2,
    altKey: 2
});

$("body").selectedKey(function (e) {
    console.log("KeyCode 2 " + e.char); // Ctrl + b
}, {
    filter: "\\2",
    ctrlKey: 1,
    altKey: 2
});

You can also apply filter:/.{4,5}/ to trigger actions when any 4 to 5 keys are pressed simultaneously

For instance, the following code triggers when A + S + D are pressed together:

$("body").selectedKey(function (e) {
    console.log("ASD has been pressed");
}, {
    filter: "^ASD$",
    ctrlKey: 2,
    altKey: 2
});

Check out a functioning demo on JSBin

Edit Note: Resolved continuous triggering issue when holding keys if validation was true
Edit2: Corrected the usage of the last variable

Answer 5

Answer №3

To keep track of which key was pressed, it is important to utilize both the keyup and keydown events:

var pressedKeys = {};

$(document).keydown(function(event) {
  pressedKeys[event.which] = true;
  // Here you can access all currently pressed keys:
  for (keyCode in pressedKeys) {
    // Loop through and identify which keys are currently pressed
  } 
});

$(document).keyup(function(event) {
  delete pressedKeys[event.which];
});

Answer 6

To keep track of which key was pressed, it is important to utilize both the keyup and keydown events:

var pressedKeys = {};

$(document).keydown(function(event) {
  pressedKeys[event.which] = true;
  // Here you can access all currently pressed keys:
  for (keyCode in pressedKeys) {
    // Loop through and identify which keys are currently pressed
  } 
});

$(document).keyup(function(event) {
  delete pressedKeys[event.which];
});

What is the method to obtain the keycode for a key combination in JavaScript?

Answer №1

Answer №2

Answer №3

Similar questions

Tips for replacing all occurrences of a specific string in HTML while preserving JavaScript attributes

Styled-Component: Incorporating Variables into Styled-Component is my goal

When it comes to successful payments, should you use `checkout.session.async_payment_succeeded` or `checkout.session.completed` in the Stripe event?

What is the method to individually determine "true" or "false" using .map() in coding

Tips for utilizing the "this" keyword in JavaScript

Issues with validating the Google Maps API JavaScript tag

Observing the innerHTML of a Vue component

Two separate tables displaying unique AJAX JSON response datasets

Employing state management in React to toggle the sidebar

Ensure that autocorrect is set to suggest the nearest possible quantity form in WordPress

What could be causing the issue with lodash throttle not functioning correctly in the useWindowSize custom hook?

Developing a two-dimensional JavaScript array using an AJAX PHP request

Applying a class to an element in VueJS is not functioning as expected

What is the top choice for creating a shallow copy of an array

Sending multiple unique forms with the same structure using JavaScript and Ajax on a single PHP page

Modify the image source using Javascript

Setting value in Angular's ng-repeat directive

Aligning the 'container-fluid' slideshow and video player

Utilizing the power of Vue Router with DataTables

Trouble Arising from the Lack of Coordination Between CSS Transition and JavaScript Update Triggered by Element