lewisdale.dev/src/blog/posts/2024/4/cursed-components-dvorak-only.md

title	date	tags
Cursed components: a dvorak-only text input	2024-04-19T11:00:00.000Z	javascript html draft

This post was inspired by Terence Eden's post about inputs that don't work with numpads, and one of the subsequent comments. This got me thinking, wouldn't it be absolutely beyond cursed to have a text input that only allowed you to enter text if you were using a sufficiently cool keyboard layout.

So, I present, the Dvorak-only Text Input:

TODO: Make the input

Detecting keyboard layout

There's no actual way to detect the keyboard layout as a named value using Javascript, but there is the KeyboardLayoutMap, which is currently supported in Chromium browsers and not much else¹. So what we can do is lookup how the user's keyboard layout maps particular keys, and then compare those to what we'd expect from a Dvorak layout.

const dvorakKeys = [
    ["KeyQ", "'"],
    ["KeyW", ","],
    ["KeyE", "."],
    ["KeyR", "p"],
    ["KeyT", "y"],
    ["KeyY", "f"]
];
navigator.keyboard.getLayoutMap().then(layoutMap => {
    const isUsingDvorak = dvorakKeys.every(
        ([keyCode, expected]) => layoutMap.get(keyCode) === expected
    );
    if (isUsingDvorak) {
            // The user is (probably) using Dvorak
        }
})

Because this call happens inside a Promise, it can't be directly used within an onChange event on the text input, so instead it rechecks every 200ms and stores the result:

let isDvorak = false;
const dvorakKeys = [
    ["KeyQ", "'"],
    ["KeyW", ","],
    ["KeyE", "."],
    ["KeyR", "p"],
    ["KeyT", "y"],
    ["KeyY", "f"]
];
setInterval(
    () => navigator.keyboard.getLayoutMap().then(layoutMap => {
        isDvorak = dvorakKeys.every(
            ([keyCode, expected]) => layoutMap.get(keyCode) === expected
        );
    }),
    200
);

Preventing the input

This part's pretty simple. Basically, just

---

1. But that's pretty on-brand for this particular use-case. ↩︎