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

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

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

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

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

Answer 4

我认为您需要 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>