如何删除从标签接管的密码字段上的占位符

Question

我无法删除密码文本框中不需要的占位符（或水印）。当密码文本框获得焦点时，Android Web 浏览器会显示从关联标签元素取代的占位符，如下所示：

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 属性时，它仅在密码获得焦点之前显示。当它获得焦点时，它会显示标签文本。
• 我不想删除标签的“for”属性。我希望标签可单击，并且密码文本框在单击标签时获得焦点。

编辑：

尝试了另一种变体（避免了“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 的属性

android:hint="用户名"

<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

为防止这种情况，您需要做的是将标签“for”属性设置为“password”以外的其他内容。您还可以将输入的“名称”属性更改为“密码”以外的其他内容。两者似乎都阻止 Android 将标签作为占位符放入。

Answer 4

似乎不可能在“聚焦”密码字段上应用样式，因为实际上它是绝对位于原始输入之上的另一个输入实例。因此，当密码字段处于焦点状态时，有两个字段。

我已经在 J​​avaScript 的帮助下成功删除了这段文本。
这个想法是暂时删除相应的 。从 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 或其他一些技巧也可以帮助删除此文本；）