[Android]: Input Field Issues
-webkit-user-modify: read-write-plaintext-only;

Android bug: label text appears in input field as a watermark or a placeholder

Label text appears in input field as a watermark or a placeholder

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:

-webkit-user-modify: read-write-plaintext-only;


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=tel] and input[type=number] or email keyboard for input[type=email])

Alternative Solution

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.

[Android]: Input Field Issues
-webkit-user-modify: read-write-plaintext-only;
was last modified: February 18th, 2013 by Антон Белоусов
Лучший способ поддержать этот блог — поделиться ссылкой:

Подпишитесь на рассылку новых постов по почте

Нашли ошибку?

Если несложно, выделите неправильно написанное слово или фразу и нажмите Shift + Enter на клавиатуре или кликните по ссылке «отправить уведомление об ошибке» — и я все исправлю.