I'm making a virtual keyboard, where by pressing a physical key, its replica must highlight on the screen. The thing is, that absolutely nothing happens, when I hit the button. The program listens to the mouse event, this part is fine. Code extraction:
_createKeys() {
const fragment = document.createDocumentFragment();
const layout = [
'`', '1', '2', '3', '4', '5', '6', '7', '8', '9', '0', '-', '=', 'backspace',
'tab', 'Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I', 'O', 'P', '[', ']',
'caps lock', 'A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L', ';', '\'', '\\', 'enter',
'shiftLeft', '\\', 'Z', 'X', 'C', 'V', 'B', 'N', 'M', ',', '.', '/', 'shiftRight', 'arrowUp',
'Ctrl', 'Win', 'Alt', 'space', 'Alt', 'Ctrl', 'arrowLeft', 'arrowDown', 'arrowRight'
];
const createIconHTML = (icon_name) => {
return `<i class="material-icons">${icon_name}</i>`;
};
layout.forEach(key => {
const keyElement = document.createElement('button');
const lineBreak = ['backspace', ']', 'enter', 'arrowUp'].indexOf(key) !== -1;
keyElement.setAttribute('type', 'button');
keyElement.classList.add('key');
switch(key) {
case 'caps lock':
keyElement.classList.add('key-wide');
keyElement.textContent = 'CapsLock';
keyElement.addEventListener("click", () => {
this._toggleCapsLock();
keyElement.classList.toggle('key-caps', this.properties.capsLock);
});
keyElement.addEventListener('keydown', (e) => {
if(e.key === 'CapsLock') console.log('pressed');
});
}
fragment.appendChild(keyElement);
if (lineBreak) {
fragment.appendChild(document.createElement('br'));
}
});
return fragment;
},
Juan Pablo Isaza
You must add the keydown event listener to the document not keyElement otherwise the event will only fire if the element has the focus, which it definitely won't if the cursor is in a text field somewhere else in the page.
Instead of :
keyElement.addEventListener('keydown', (e) => {
if(e.key === 'CapsLock') console.log('pressed');
});
Use :
document.addEventListener('keydown', (e) => {
if(e.key === 'CapsLock') console.log('pressed');
});
However, adding ~100+ event listeners to document would not be a good idea. You should create a single event listener on document that listens for all keydown events and activates the appropriate virtual key.
layout.forEach(key => {
...
keyElement.dataset.key = encodeURIComponent(key);
...
});
document.addEventListener('keydown', event => {
let k = encodeURIComponent(event.key);
let vkey = document.querySelector(`[data-key="${k}"]`);
vkey?.classList.add('pressed');
});
you only call the addEventListener inside the switch case also to document not the element, which happens only with caps, so this needs to get out.
also, since it's only one switch case, why won't you use if condition instead? would make the code more readable for you.