♻️ Override DOM input typed character

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";
}