A keyboard on the screen: typing on a phone

The work: 27 March 2026 · Written 1 November 2026 · Entry 3 of 17

On 27 March 2026 the project got support for typing with a virtual keyboard on mobile devices. It started as a small fix for the typing box, and it became one of the signature parts of the site: on a phone TypeLemon shows its own English keyboard instead of the phone's.

The problem with the phone keyboard

A typing game on a phone has an awkward conflict. The phone's own keyboard slides up and covers half the screen, which hides the text you are supposed to type. It also changes the page size, which makes the layout jump. And it brings autocorrect, which is helpful in a message and wrong in a typing test.

The solution

The site draws its own keyboard under the game, and the typing box becomes a read-only anchor so the phone never opens its own keyboard. Every key press goes through the same code as a physical key press on a computer, which means the rules of the race are the same on both.

The keyboard is modelled on the layout of a phone's own keyboard: letters, shift, backspace and a key for numbers and symbols. A later version added a layout for phones held sideways, which is described in another entry of this log.

What it taught us

• A phone is a first-class device for a typing site, not an afterthought.
• Layout is a feature: the keyboard, the text and the game must all fit on a 320-pixel-wide screen.
• Tests on real phone sizes are worth the effort. The project now checks its layout at several phone sizes from 320 by 568 pixels upward.