$(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?
Below are a couple of useful plugins that could be beneficial:
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
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];
});
Looking at this JavaScript object var items = [{ content: 'A_lvl0', }, { content: 'B_lvl0', }, { content: 'C_lvl0', children: [{ content: 'C_1_lvl1', }, { content: 'C_2_lvl1& ...
In my React application, I have a form inside a modal pop-up. When the user closes the pop-up, I want to check for any changes made in the form fields. If there are changes, I will display a confirmation modal; if not, I will simply close the pop-up. <F ...
I recently set up a form on my WordPress website for users to submit data. Once the form is submitted, I use AJAX to create a new post without having to reload the page. I now need to figure out how to pass the post ID, a simple integer, back to the page s ...
I am in the process of developing a straight-forward To-Do List application with VueJS. <template> <div> <br/> <div id="centre"> <div id="myDIV" class="header"> <h2 style="margin:5px">M ...
I'm running into a problem with my project. Here is the code I've been using to hide my div element : @keyframes hideAnimation { to { visibility: hidden; } } To trigger the animation and hide the div after 6 seconds, I have implemented ...
Introduction In Mongoose, I am facing an issue with a post findOneAndUpdate hook where I need to perform a database query. Specifically, when trying to execute a .find() operation on another model, I encounter the following error: Error Description Typ ...
I've been attempting to modify the name of the image I'm uploading to the server using multer. However, even after utilizing the multer.diskStorage method as per the documentation, the file continues to be saved with random names. MY CODE: con ...
When my code is executed in edit mode, I have a selection of API calls that need to be made, as well as one specific API call that must be made in both create and edit modes. Here is the current code snippet: // other controller code var config = {}; ...
I currently have a dynamic unordered list within my HTML file. Upon loading the page, certain list items are automatically added. The original format of the list is displayed as follows: <ul class="ui-front"> <li><div>1</div& ...
Just starting out with React and encountering an issue with rendering using reactDom: index.js import ReactDOM from 'react-dom'; import A from 'components/A'; import B from 'components/B'; render(<A />, document.getEl ...
Currently, I am engrossed in reading the 3rd edition of JavaScript Pocket Reference. The author makes an interesting statement in chapter 5 - Objects on page 75: In JavaScript, objects are dynamic, allowing properties to be added and deleted at will. Int ...
I am facing difficulties in sharing a base64 image on WhatsApp. On both iOS and Android, the actual base 64 code is shared instead of the image. When I try to use iMessage or Email on iOS, the base64 images are converted and displayed correctly. However, ...
My goal is to maintain the checked items as checked when searching for another item in ion-searchbar. While I have managed to keep the checked items, the checkmark icon does not stay checked. What I aim for is to retain the checked state of all food items ...
I have implemented a scrolling feature for one of the div elements in my Application. Inside this div, there is a templated table with over 100 rows. Users are able to add or delete rows using a contextMenu. The contextMenu offers 4 options - AddTop, AddB ...
My textarea's height is supposed to be 500%, but it's not changing. I suspect that being inside a table might have something to do with the issue, but I'm unsure of what needs to be adjusted to set the height correctly. Surprisingly, the wid ...
Currently, I am working with React and dynamically creating new input fields while utilizing React-hook-form for validation purposes. My approach involves: Having a dropdown with numbers as options, such as 1, 2, 3, 4 Generating input fields based on the ...
I'm encountering an issue with implementing active navlinks in NextJS version 13.4.4. I need to access the current URL for this solution, but every attempt ends up failing. My folder structure is organized as follows: .next components Header header ...
My first calculator is nearly complete, but I have encountered a challenge. The functionality of my calculator is quite simple; it prompts the user for input using window.prompt and performs addition, subtraction, multiplication, or division based on the u ...
I need to customize a data field within a table, but I am unable to locate or identify its div ID. Here is the page source: <tbody> <tr> <td style="font-size:12px; text-align:center;" name=""> <div sty ...
Using the HostListener directive, I am listening for the click event on elements of the DOM. @HostListener('click', ['$event.target']) onClick(e) { console.log("event", e) } Upon clicking a button tag, the "e" object contains the fol ...