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

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