5

I am having an issue with the content of a label being automatically inserted as a watermark inside an input. I have tested this on a range of phones and browsers but it seems to only happen on the HTC EVO (3D X515A). When I give it focus (e.g. touch the input) the text disappears, similar to the placeholder attribute of an input. There is also no auto-population with js.

I have tried searching to see if this is a new standard on Android browsers but have come up with only one reference to the issue which was closed over a year ago with no solution: https://github.com/jquery/jquery-mobile/issues/382

Here is the label and input code:

<input type="number" name="phone" id="phone" minlength="10" maxlength="10" inputmode="latin digits" required="required" />
<label for="phone">Confirm your Valid Cell Number:</label>

I will have to take a picture of the phone's display if anyone needs to see the issue because it does not happen on my emulator.

UPDATE: Removing the input identifier on the label (for="phone") solves the problem, but is not syntactically correct. Seems to be a weird bug, or "feature" on HTC browsers.

I ran into another big problem with the HTC browser. When you autofocus on an input the browser will apply its own style regardless of your css. It removes the border and background color and the input looks empty and almost invisible (if not for the blinking cursor). Using the :focus pseudo-class and other -webkit selectors don't work to override the browser's styles. There's another question on here describing this issue with no clear answers. Closest I can get to a workaround is removing the style from the input and wrapping it in a div.

Community
  • 1
  • 1
Matt K
  • 6,620
  • 3
  • 38
  • 60

2 Answers2

3

you can fix this by adding the following css

-webkit-user-modify: read-write-plaintext-only;
emjaksa
  • 91
  • 6
3

I fixed this by adding line breaks before the text in my label like so:

<label for="phone">



Confirm your Valid Cell Number:</label>
<input type="number" name="phone" id="phone" minlength="10" maxlength="10" inputmode="latin digits" required="required" />

The browser is actually rendering the text (including whitespace) from the label in the input. What a bizarre/stupid bug!

gburns
  • 66
  • 2
  • bad craziness indeed! thank you for the update. your method seems better, I'd rather add some whitespace than lose my syntax! do you know the scope of this bug? like if it's limited to a specific browser? – Matt K Feb 28 '12 at 23:02
  • Hi tried the above solution but raises another bug... i.e. numeric keyboard doesn't opens...can anyone provide a solution – Maverick May 22 '13 at 07:09