www.oracul.co — game

How to recreate Google’s input persistent placeholder

Overview

When I created Oracul the game needed to recreate Google’s input persistent placeholder. That single UI feature would be key for the game to work. If you have played Oracul you will understand why this UX is essential.

The placeholder persists even after the user start typing

Chrome Devtools to dig into the code

I used Google Chrome Devtools to see how the input and placeholder are composed together. This is what I found:

Two inputs nested within a div container.

Persistent Placeholder = 2 inputs + background div

Two inputs on top of each other. One input has the placeholder, while the other is free type mode. The div at the background gives the background-color and border-radius.

the final result

Composition of elements stacked on top of each other.

HTML boiled down looks something like this

and the CSS Styles

CSS styles

Stacking the inputs and the div on top of each other with relative positioning on div and absolute positioning on the inputs.

That’s basically it. For the next part I’m going to talk about problems with keypress events in Android.

Android’s Google Chrome stopped working!

Weird characters when listening to keyUp/keyDown/keyPress on Android browser

The issue

Oracul works perfectly in desktops browsers or iOS browsers. Somehow it stopped working for Android browsers (native and Chrome). In September, there was an Android update that broke this keyCode feature.

Chrome DevTools debugging

I tried debugging Oracul with Chrome devTools by plugging in my device to my laptop. More info about that here.

I found that no matter which keyboard event listener (keyUp, keyDown or keyPress), the result was always keyCode 229. This will break Oracul’s logic because it relies on the keyboard events to display questions and answers.

Plugged in my Samsung Galaxy S4 Android phone to my laptop

Looking for help

I’ve been browsing through Stackoverflow and found a couple of questions with the same issue.

One of them has the theory that Android’s virtual keyboard intercepts keypress event and injects a text prediction by mutating the keyEvent object. In this mutation the keyCode property is lost and therefore the browser defaults to 229.

And we have that the equivalent for the keyCode 229 is an å.

229 == å

The code for Oracul is open source and currently there is an issue open.

If you happen to know the answer or would like to PR a fix you’re more than welcome.