Russian Keyboard approximation (HTML, JavaScript) - replacing user input keystrokes

The project is to approximate a Russian keyboard layout by replacing the characters the user types in using the keyboard.

No, I’m not Russian …
I just saw a website that did virtual keyboards that gave me the idea, and I wanted a practical project to try.
I figured I could do it with my level of JavaScipt skills so far.
Looking up all the Unicode encodings (then then typing them into the code) was a pain in the ___ .
And getting Caps Lock to work took a lot of extra code.

Here it is, as Codecademy workspace:

I’ll put a more polished version of the project on GitHub eventually.

If you have any comments or suggestions, please reply.


Hey, cool feature!
Do you plan to expand it towards making the keyboard clickable in addition to the possibility of typing?
Right now I would have to search for the latin letter on my keyboard which isn’t arranged the same way as the one in the picture and the cyrillic letter in the picture which would take some time.
Then you could even extend it by a feature to rearrange the keyboard according to the way the keyboard is arranged in the user’s country…
Sorry sounds like a bit of work :smiley:

Thanks for the suggestions.

I wasn’t planning to do do any more with this project …
I guess I could do a map for the image to make the stuff in the image clickable,
or just have a table in the HTML that I’d put html buttons into.

But I don’t know of any way to get the arrangement of a user’s keyboard.

You could use an interactive SVG and rearrange that depending on the on the user’s choice for the keyboard layout.
What keyboard is the one you used in the image?

I’ve been working on making a clickable keyboard in the project. (I tried to copy the picture and I used a lot of buttons arranged in an HTML table.) It’s not finished … but the keyboard mostly works. (The CSS was more work than expected.)

Eventually, I’ll try to make the stuff written on the keys editable and have functions that gather what users wrote on the keys and use that to process the keystrokes too.

I haven’t learned anything about using an SVG image to do this yet … eventually, maybe.

1 Like

@janbazant1107978602 this is super awesome!! Thanks for sharing

Here’s a parallel, scaled-down version of the project that I have on
link to project as a “pen” in codepen here

I’ve been working on a similar project (to replace the user’s keystrokes).
In this new one I replaced the keystroke and the previously typed character
in order to do a letter with a tilde or umlaut or accent mark .

I put it in the same Codecademy workspace (in a folder), and created a link on the project’s html page (top right on the main page).

It’s incomplete so far.
There’s a few more features I want to add, and some bugs to fix,
but the majority of it seems to work so far … but I haven’t done much testing yet.

Same thing, in the Codecademy workspace:

I’ve made the keyboard thing partially editable (by typing into an HTML element that’s contenteditable) …
hopefully there’s no bugs that I haven’t spotted yet.
The editable stuff is a work in progress … I’ll try to make better functions for some parts of that.

That makes things easier. One thing I would suggest still: Since the typed text can’t be copied by keyboard short cuts, I would add a button “copy text”…