There’s an issue in Android web view, at least on HTC EVO and Samsung Galaxy Nexus that causes input field label text to behave just like placeholder: appear as a watermark over the empty input field and disappear as soon as user starts typing (see image).
Also default system styles may apply on input fields when they receive focus, causing layout break, overlapping other elements with a system input field (e.g. search icon will disappear for search field) that quite often can be vertically misaligned with the original input field (see screenshot) if the one is placed in element with position absolute or fixed.
These is quite a complex issue that occurs with a very simple layout like the following:
<label for="phone">Phone: *</label>
<input type="tel" name="phone" id="phone" minlength="10" maxlength="10" inputmode="latin digits" required="required" />
Some research revealed a simple solution — apply the following CSS to the input field:
This CSS property determines whether a user can edit the content of an element.
-webkit-user-modify: read-only | read-write | read-write-plaintext-only;
- The content is read-only.
- The content can be read and written.
- The content can be read and written, but any rich formatting of pasted text is lost.
Safari 3.0 and later. (Called
-khtml-user-modify in Safari 2.0)
This property disables system inputs render and though typing UX becomes less responsive. Also devices do not generate special keyboards for such fields (i.e. numeric keyboard for
input[type=number] or email keyboard for
It sounds crappy but if you just add couple of line breaks into the
LABEL element, then the line that will show up in your input field will be empty.
Considering such behaviour a default for HTC EVO and Samsung Galaxy Nexus devices the bes UX solution is to leave it the way it is, just make sure that position of system input is correct.
-webkit-user-modify: read-write-plaintext-only; was last modified: February 18th, 2013 by