How to get rid of placeholder on password field taken over from label

Question

I can\'t get rid of unwanted placeholder (or watermark) on password textbox. When password textbox is focused, Android web browser displays placeholder overtaken from associated

Answer 1

the following css can disable this:

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

Answer 2

I think you need the place holder in android. For that use the property of Edittext

android:hint="Username"

<EditText android:layout_width="match_parent" android:layout_height="wrap_content" android:inputType="textNoSuggestions" android:id="@+id/textName" android:hint="Username"></EditText>
<EditText android:layout_width="match_parent" android:layout_height="wrap_content" android:inputType="textEmailAddress" android:id="@+id/textEmail" android:hint="Email"></EditText>

Answer 3

What you need to do to prevent this is to set the label 'for' attribute to be something other than 'password'. You can also change the 'name' attribute of the input to something other than 'password'. Both seem to stop Android from putting the label in as a placeholder.

Answer 4

It seems that it's impossible to apply styles on "focused" password field because actually it is another input instance absolutely positioned over the original input. So there are two fields when password field in focus.

I've managed to remove this text with the help of JavaScript. The idea is to temporary remove corresponding <label> from DOM, and then restore it after while.

The code will look like:

var field = document.getElementById('password');
var label = document.querySelector('label[for="password"]');
field.onfocus = function() {
    label.parentNode.removeChild(label);
    setTimeout(function(){
        field.parentNode.insertBefore(label, field);
    },1000);
}

Small delay for setTimeout is not working. I think delay for this is device/system specific. Maybe modifing label.innerHTML or some other tricks also can help to remove this text ;)