Cannot type into text input on my phone

Question

I've created a simple text input on my website, and for what ever reason, I am unable to type into it on my phone (OnePlus One running CyanogenMod 13.1.2 - Android 6.0.1).

What happens is when I try to click on the input, the text cursor and keyboard will pop up and disappear in an instant; well before I get a chance to type anything. Only way I am able to select and type anything into it is by rapidly clicking on it until it works properly. I've tried it in Chrome and Firefox and it doesn't work in either. Works fine on desktop, the problem only pops up on my phone.

EDIT** Here is the input's markup

<div class="parent">
  <input placeholder="Suburb/Postcode" type="text">
</div>

I have a sneaky suspicion that it may be from the styling so here is the css as well

.parent {
  height: unset;
  position: relative;
}

input {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  user-select: all;
}

Please share your code rather than link to an offsite resource. [mcve] — TidyDev, Jan 24 '18 at 01:13
I'm not sure, but [is this revelant](https://stackoverflow.com/q/38989559/1270789)? It might be a dup. — Ken Y-N, Jan 24 '18 at 01:15

score 0 · Answer 1 · answered Jan 24 '18 at 02:40

Ok, I've figured out a fix, however I'm still unsure as to what the exact problem is. The problem seems to stem from a bit of javascript I wrote that would move the input's parent around the DOM when viewing on smaller devices. I was successfully able to type into the input after doing one of two things. Either I don't move the input's parent - or - after moving the input's parent, I change or remove the parent's id.

Cannot type into text input on my phone

1 Answers1