I am having a problem with the content being labelautomatically inserted as a watermark inside input. I tested this on a number of phones and browsers, but it seems to only happen on HTC EVO (3D X515A). When I give focus (for example, touching the input), the text disappears, similar to the attribute placeholderfor input. Also there is no autopopulation with js.
I tried searching to find out if this is the new standard for Android browsers, but came up with only one link to a problem that was closed a year ago without a solution: https://github.com/jquery/jquery-mobile/issues/382
Here is the shortcut 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 need to take a screenshot of the phone if someone needs to see the problem because this does not happen on my emulator.
UPDATE: removing the input id on the shortcut (for = "phone") solves the problem, but is not syntactically correct. This seems to be a weird bug or โfeatureโ in HTC browsers.
HTC. css. , ( ). : focus -webkit , . question . , div.