How to recreate Google’s input persistent placeholder
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.
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:
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.
HTML boiled down looks something like this
and the 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!
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 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.
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.