I recently received a bug complaint from a customer in Sweden where the default Mac keyboard layout has it that Option + 2 makes a @ sign. The customer informed me that also all keyboards in Finland has such a layout.
As far as I know, keyboards with US QWERTY layout or the UK QWERTY layouts have Shift + 2 to make an @ sign.
The problem lies in that I have a shortcut setup in the website which uses Option + 2 to perform a navigation.
This forces any user in Sweden/Finland to navigate whenever they want to enter an @ sign.
Is there a way to know beforehand that the keyboard layout the user is using has "the not what I expect modifiers"? Or do I have to provide an option for them to disable navigation? The way I detect keys at the moment (with Angular):
@HostListener('document:keydown', ['$event'])
public onPublicKeyDown(event: KeyboardEvent) {
if (event.altKey) {
switch (event.code) {
case 'Digit2':
// Perform the navigation
}
}
}
In terms of usability and compatibility with various operating systems I'd recommend changing Alt to Ctrl (i.e. Ctrl + 2).
However, there is also JS way to check that a user is not trying to input text into a text field.
Events bubble up and down from the element which is in focus to top-level element (BODY) waiting to be handled.
It is easy to check if event has reached it's target:
// check that event was not picked by inputs and bubbled up
// to the element to which it was attached (i.e. document.body)
if (event.currentTarget === event.target) {
...
}
event.currentTarget refers to element to which event handler was attached (I suppose the onPublicKeyDown event handler is attached to BODY of the page)
event.target refers to the object to which event was dispatched (when focus is in INPUT element and user is typing text into a field it will be INPUT, if focus is not inside INPUT it'll probably be BODY of the page.
Here's working example:
function onPublicKeyDown(event) {
// check that event was not picked by inputs and bubbled up
// to the element to which it was attached (i.e. document.body)
if (event.target === event.currentTarget) {
if (event.altKey) {
switch (event.code) {
case 'Digit2':
// Perform the navigation
alert('Navigating away...');
}
}
}
}
document.body.addEventListener('keydown', onPublicKeyDown);Try press 'option + 2' when focused inside input and when outside.<br>
<input type="text" />