Problem trying to solve.
Map every keyboard (input source / layout) back to EN-US.
Why would I want to do this, you ask?
At work we have a QRcode scanner that can be connected to any machine (via USB), and it will simulate some keyboard input when you scan a QRcode.
Scanner works with US Standard 101 layout (EN-US), and it knows for example that character Y has scancode 0x1c and Z will have scancode 0x1d, and it will simulate a scancode for a specific key on keyboard (USB keyboard scancodes).
For example we have a QRcode that represent this URl.
https://amayzyng.com/iamandrewluca
This will type QRcode scanner for 5 keyboard (input source / layout)
// English (ABC)
https://amayzyng.com/iamandrewluca
// German (ABC - QWERTZ)
httpsÖ--amazyzng.com-iamandrewluca
// Dvorak
dyyloSzzamaf;fbivjrmzcamabep.,ngja
// Russian
реезыЖ//фьфнянипюсщь/шфьфтвкуцдгсф
// Romanian - Standard
httpsȘ//amayzyng.com/iamandrewluca
As you see the results for each one are the same 🙃
This is why we need to map US Standard 101 layout scancodes to EN-US
Requirements
Solution is based on KeyboardEvent.code that represents physical code of the key. Also KeyboardEvent.code (status: Working Draft) is not supported in all browsers.
Here is a polyfill if you want to support more browsers
Solution for the problem. Let's get started!
This is the only piece of HTML you'll see in this post 🙂
The rest will be mighty JavaScript
<input type="text" />
First of all let see what are most events used on an input, and in what order they are trigerred.
const input = document.querySelector('input')
input.addEventListener('focus', info)
input.addEventListener('keydown', info)
input.addEventListener('keypress', info)
input.addEventListener('input', info)
input.addEventListener('keyup', info)
input.addEventListener('change', info)
input.addEventListener('blur', info)
function info(event) {
console.log(event.type, event.target.value)
}
The only way to catch typed character into input is to watch for keypress event.
At this phase character does not appear in input.value
function onFocus (event) { info(event) }
function keyDown (event) { info(event) }
function keyPress (event) {
info(event)
// this 2 calls will stop `input` and `change` events
event.preventDefault();
event.stopPropagation();
// get current props
const target = event.target
const start = target.selectionStart;
const end = target.selectionEnd;
const val = target.value;
// get some char based on event
const char = getChar(event);
// create new value
const value = val.slice(0, start) + char + val.slice(end);
// first attemp to set value
// (doesn't work in react because value setter is overrided)
// target.value = value
// second attemp to set value, get native setter
const nativeInputValueSetter = Object.getOwnPropertyDescriptor(
window.HTMLInputElement.prototype,
"value"
).set;
nativeInputValueSetter.call(target, value);
// change cursor position
target.selectionStart = target.selectionEnd = start + 1;
// dispatch `input` again
const newEvent = new InputEvent('input', {
bubbles: true,
inputType: 'insertText',
data: char
})
event.target.dispatchEvent(newEvent);
}
function keyUp (event) { info(event) }
function onInput (event) { info(event) }
function onChange (event) { info(event) }
function onBlur (event) {
// dispatch `change` again
const newEvent = new Event('change', { bubbles: true })
event.target.dispatchEvent(newEvent);
info(event)
}
function info (event) { console.log(event.type) }
function getChar(event) {
// will show X if letter, will show Y if Digit, otherwise Z
return event.code.startsWith('Key')
? 'X'
: event.code.startsWith('Digit')
? 'Y'
: 'Z'
}
Top comments (0)