- From: Keith Cirkel <notifications@github.com>
- Date: Fri, 21 Jul 2017 12:40:17 +0000 (UTC)
- To: w3c/uievents <uievents@noreply.github.com>
- Cc: Subscribed <subscribed@noreply.github.com>
- Message-ID: <w3c/uievents/issues/151@github.com>
(From whatwg/html#2856)
### Use Case
Often times, when adding keyboard event listeners, one would like to determine if a modifier key is pressed (one of `ctrlKey`, `metaKey`, `altKey`, `shiftKey`) to create keyboard shortcuts in a webapp type scenario. The inherent problem with checking for truthiness of these values is that this becomes "greedy" - one also needs to check the falseness of other keys. As such it becomes quite a lot of code to determine if only a single modifier is pressed:
```js
// Pressing `j` scrolls to next item, ctrl+j scrolls down 2 items
document.addEventListener('keypress', event => {
if (event.key === 'j' && !(event.ctrlKey || event.altKey || event.metaKey || event.shiftKey)) {
scrollDownOneItem()
}
if (event.key === 'j' && event.ctrlKey && !(event.altKey || event.metaKey || event.shiftKey)) {
scrollDownTwoItems()
}
})
```
### Reasoning
This is problematic because it is an easy thing to miss while developing, and it is a fair amount of boilerplate code to check a handful of properties to ensure they are false.
### Requirements
So to solve this, I believe the solution should keep to these requirements:
- The solution should be able to determine if _one or more modifier_ keys are truthy, while ensuring rest of the available modifier keys are falsey.
- The solution should be one method call or property, rather than the current multiple properties.
--
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub:
https://github.com/w3c/uievents/issues/151
Received on Friday, 21 July 2017 12:40:48 UTC