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

Posted 2023-03-05

【中文标题】如何摆脱从标签接管的密码字段上的占位符

【英文标题】：How to get rid of placeholder on password field taken over from label

【发布时间】：2011-10-13 06:49:09

【问题描述】：

我无法删除密码文本框中不需要的占位符（或水印）。当密码文本框被聚焦时，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>

【问题讨论】：

嘿'dkl' - 你有没有解决这个问题？我们在某些 Android 浏览器中的某些页面上看到了类似的问题。

没有。我删除了“for”属性，但这不是修复，只是一种解决方法。

【参考方案1】：

以下 css 可以禁用此功能：

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

【参考方案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 或其他一些技巧也可以帮助删除此文本；）

【参考方案3】：

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

【讨论】：

好吧，但我需要保留标签的功能。当我不使用“for”属性时，当我点击标签时，密码文本框不会获得焦点。

【参考方案4】：

我认为您需要 android 中的占位符。为此使用 Edittext 的属性

android:hint="用户名"

<EditText android:layout_ android:layout_ android:inputType="textNoSuggestions" android:id="@+id/textName" android:hint="Username"></EditText>
<EditText android:layout_ android:layout_ android:inputType="textEmailAddress" android:id="@+id/textEmail" android:hint="Email"></EditText>

【讨论】：

不是原生安卓应用；它是一个普通的 HTML 网页，在标准的 Android 浏览器中访问