Как избавиться от заполнителя в поле пароля, перенесенного с метки

Question

Я не могу избавиться от нежелательного заполнителя (или водяного знака) в текстовом поле пароля. Когда текстовое поле с паролем выделено, веб-браузер Android отображает заполнитель, перегруженный связанным элементом метки, например:

Источник HTML:

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

Примечание:

• Заполнитель отображается только тогда, когда текстовое поле имеет фокус и является пустым.
• При использовании HTML-атрибута placeholder при вводе пароля он отображается только до тех пор, пока пароль не будет сфокусирован. Когда он получает фокус, он отображает текст метки.
• Я не хочу удалять атрибут «for» метки. Я хочу, чтобы ярлык был кликабельным, а текстовое поле пароля - фокусом при нажатии метки.

Edit:

Попробовал другой вариант (без атрибута "for"), но заполнитель все еще присутствует:

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

Answer 1

следующий css может отключить это:

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

Answer 2

Я думаю, вам нужен заполнитель в Android. Для этого используйте свойство Edittext

андроида: подсказка = "Имя пользователя"

<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

Кажется, что невозможно применить стили к «сфокусированному» полю пароля, потому что на самом деле это другой экземпляр ввода, абсолютно позиционированный поверх исходного ввода. Таким образом, в поле ввода пароля есть два поля.

Мне удалось удалить этот текст с помощью JavaScript. Идея состоит в том, чтобы временно удалить соответствующий из DOM, а затем восстановить его через некоторое время.

Код будет выглядеть так:

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

Небольшая задержка для setTimeout не работает. Я думаю, что задержка для этого зависит от устройства / системы. Возможно, изменение label.innerHTML или некоторые другие приемы также могут помочь удалить этот текст;)

Answer 4

Что вам нужно сделать, чтобы предотвратить это, так это установить для атрибута label для атрибута значение, отличное от «password».Вы также можете изменить атрибут «name» ввода на что-то отличное от «password».Похоже, что оба препятствуют тому, чтобы Android поместил метку в качестве заполнителя.