0

I have an SVG 'app' that uses many key commands for control. The problem I have is that with all the various techniques I have researched and tried, I have not been able to find the correct way to isolate key combos without them colliding. For example, if I trap for Y and Ctrl Y, when I press Ctrl Y, the Ctrl Y responds, but so does the Y.

I can't possibly paste all the tests I have tried that failed, but I did manage to come up with my own solution that, while working, seems quite burdensome. So, what is the right way to trap for key combos?

p.s. I am not a JS programmer, and this 'app' is my first JS project, outside of some onclick functions in webpages.

Thanks

Most of the examples I have found look something like...

var lastkey = {}
window.addEventListener('keydown', function (event) {
  lastkey[event.code] = true
  lastkey[event.key] = true
  if (lastkey['Alt'] && lastkey['KeyY']) { blah() }
  if (lastkey['KeyY']) { blahblah() }
});
window.addEventListener('keyup', function (event) {
  lastkey[event.code] = false
  lastkey[event.key] = false
});

The version I wrote that works is...

var lastkey = {}

function isOn(key) {
  if (typeof lastkey[key] === "undefined") {
    res = false
  } else {
    res = true
  }
  if (typeof lastkey[key] === "boolean") {
    res = lastkey[key]
  }
  return res;
}

window.addEventListener('keydown', function(event) {
  lastkey[event.code] = lastkey[event.key] = true

  if (isOn('Alt') && !isOn('Control') && !isOn('Meta') && !isOn('Shift')) {
    isAlt = true
  }
  if (!isOn('Alt') && isOn('Control') && !isOn('Meta') && !isOn('Shift')) {
    isCtl = true
  }
  if (!isOn('Alt') && !isOn('Control') && !isOn('Meta') && !isOn('Shift')) {
    isKey = true
  }
  if (!isOn('Alt') && !isOn('Control') && isOn('Meta') && !isOn('Shift')) {
    isMet = true
  }
  if (!isOn('Alt') && !isOn('Control') && isOn('Meta') && !isOn('Shift')) {
    isSft = true
  }

  //? CONTROL-ALT
  if (isOn('Alt') && isOn('Control') && !isOn('Meta') && !isOn('Shift')) {
    isAltCtl = true;
    isAlt = isCtl = isMet = isSft = isAltMet = isSftCtl = false
  }
  //? ALT-META
  if (isOn('Alt') && !isOn('Control') && isOn('Meta') && !isOn('Shift')) {
    isAltMet = true;
    isAlt = isCtl = isMet = isSft = isSftCtl = isAltCtl = false
  }
  //? CONTROL-META
  if (!isOn('Alt') && isOn('Control') && isOn('Meta') && !isOn('Shift')) {
    isCtlMet = true;
    isAlt = isCtl = isMet = isSft = isAltMet = isSftCtl = isAltCtl = false
  }
  //? SHIFT-CONTROL
  if (!isOn('Alt') && isOn('Control') && !isOn('Meta') && isOn('Shift')) {
    isSftCtl = true;
    isAlt = isCtl = isMet = isSft = isCtlMet = isAltMet = isAltCtl = false
  }
  if (isKey && lastkey['KeyY']) {
    console.log("Y")
  }
  if (isCtl && lastkey['KeyY']) {
    console.log("Ctl-Y")
  }
  if (isAlt && lastkey['KeyY']) {
    console.log("Alt-Y")
  }
  if (isMet && lastkey['KeyY']) {
    console.log("Meta-Y")
  }
  if (isCtlMet && lastkey['KeyY']) {
    console.log("Control-Meta-Y")
  }
  if (isAltMet && lastkey['KeyY']) {
    console.log("Alt-Meta-Y")
  }
  if (isSftCtl && lastkey['KeyY']) {
    console.log("Shift-Control-Y")
  }
});
window.addEventListener('keyup', function(event) {
  lastkey[event.code] = lastkey[event.key] = false
  isCtl = isAlt = isKey = isMet = isSft = isSftCtl = isAltCtl = isAltMet = isCtlMet = false
});
Bumhan Yu
  • 2,078
  • 1
  • 10
  • 20
mishrahsigni
  • 29
  • 5
  • What are you trying to accomplish with statements like `a = b = c = d = e = false` lines? I suspect that whatever you're trying to do with them is not achieved here. See [this SO Q&A](https://stackoverflow.com/questions/7511279/javascript-a-b-c-statements) for reference. – Bumhan Yu Feb 27 '23 at 04:03
  • Conceptually, whenever a keyboard stroke is made, you'd check which key is pushed (e.g. `Y`) and also check whether a special key is pushed simultaneously (e.g. `metaKey`, `shiftKey`, etc). Then you'd determine which combination is made in the current key stroke, and handle it accordingly. See [this article](https://daily-dev-tips.com/posts/javascript-detecting-key-combinations/#detecting-key-combinations-in-javascript) for reference. – Bumhan Yu Feb 27 '23 at 04:09
  • Please clarify your specific problem or provide additional details to highlight exactly what you need. As it's currently written, it's hard to tell exactly what you're asking. – Community Feb 27 '23 at 09:05
  • "a=b=c=d=false" is intended to set all the variables to false, which it does. The FAQ linked shows the exact same example (but warns to beware of scope) The Exact problem is "if I trap for Y and Ctrl Y, when I press Ctrl Y, the Ctrl Y responds, but so does the Y". In the example page linked I see they did the same thing my code does... so I guess this is just the way it is in JS :/ Thanks for the feedback – mishrahsigni Feb 28 '23 at 21:39

0 Answers0