Detecting Modifier Keys on KeyDown and KeyUp with Scroll Event

Question

Similar to this solution how can I re-use the code to include both keyDown and keyUp events? I added one even for each KeyUp and KeyDown but there are problems when user holds down and releases a key and the events from the original keyUp event no longer continuously fire.

Example:

User presses and holds down Ctrl + Shift so KeyDown is continuously fired and prints Ctrl + Shift is pressed.
User releases Shift while still holding Ctrl so KeyUp is fired once but KeyDown for Ctrl no longer continue to fire

How can I improve this? The aim is to pair this with a mousescrollwheel event. If ctrl+mousewheel then scale plot along x axis. If Alt+moussewheel then scale along ploy Y axis. If both or neither then scale X and Y. Lastly, how can I pair this key modifier event with the mouse scroll wheel I provided to be in a responsive manner? I notice there are times where the key events will block the scroll event.

var scrollDelta = 0;
$(document).on("keydown",  reportKeyEvent("Pressed") );
$(document).on("keyup",  reportKeyEvent("Released") );
$(document).bind("wheel", updateScroll);

function reportKeyEvent (e, eventName) {
    var keyStr = ["Control", "Shift", "Alt"].includes(e.key) ? "" : e.key + " ";
    var out =
        eventName + " " +
        ( e.ctrlKey  ? "Control " : "" ) +
        ( e.shiftKey ? "Shift "   : "" ) +
        ( e.altKey   ? "Alt "     : "" ) +
        keyStr + "key(s)"
    ;
    console.log(out)
    
    ctrlKeyPressed = e.ctrlkey;
    shiftKeyPressed = e.shiftkey;
    altKeyPressed = e.altkey;

    // add shift+scroll?
    // add ctrl+scroll?
   
    e.stopPropagation ();
    e.preventDefault ()
}

function updateScroll(e){
    if(e.deltaY < 0){
        scrollDelta +=50;
    }else if (e.delaY > 0){
        scrollDelta -=50;
    }else{
        scrollDelta = 0;
    }
}

Typically you can get ctrl, shift and apple key information in javascript via e.ctrlKey, e.shiftKey, and e.metaKey — ControlAltDel, Nov 02 '21 at 16:48
I have that in the example code but keyUp will block keyDown events. — DawnAxolotl, Nov 02 '21 at 16:59
I think you need to move your code that's now activated by keyDown events to a timer (see setInterval). You could maintain/monitor which keys are down and clear the interval when all keys are up — ControlAltDel, Nov 02 '21 at 17:40
Sorry im not following. It sounds like I would change my keydown method to start an interval method. What would be contained in that method? Could you provide a small example or pseudo code with your approach? — DawnAxolotl, Nov 02 '21 at 18:38

score 0 · Answer 1 · answered Nov 02 '21 at 19:04

You can keep your reportKeyEvent function. Just change to use the interval instead of the event

var keydownIntervalID;
var keys = new Set();

$(document).keyDown(function(e) {
  keys.add(e.keyCode);
  if (!keydownIntervalID) {
    keydownIntervalID = setTimeout(reportKeyEvent, 50);
  }
});
$(document).keyUp(function(e) {
  keys.delete(e.keyCode);
  if (keys.size === 0) {
    clearInterval(keydownIntervalID);
    keydownIntervalID = undefined;
  }
});

Detecting Modifier Keys on KeyDown and KeyUp with Scroll Event

1 Answers1