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 label element, like this:

HTML source:

<form method="post">
    <label for="userName">Login name:</label>
    <input id="userName" name="userName" type="text" value="" />

    <label for="password">Password:</label>
    <input id="password" name="password" type="password" />

    <input type="submit" id="submit" name="submit" value="Log In" />
</form>

Note:

• Placeholder is displayed only when the textbox has focus and is empty.
• When using "placeholder" HTML attribute on password input, it is displayed only until the password gets focused. When it receives focus, it displays label text instead.
• I don't want to delete the "for" attribute of the label. I want the label to be clickable and the password textbox to get focus when the label is clicked.

Edit:

Tried another variant (which avoids "for" attribute), but the placeholder is still present:

<label>Password: <input id="password" name="password" type="password" /></label>

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 ;)