如何仅使用 CSS 将文本输入字段转换为密码字段？

如何仅使用 CSS 让输入字段看起来像密码字段

在 Web 开发中，有时需要显示文本输入栏为密码栏，隐藏字符，保证用户隐私。这可以完全通过 CSS 来实现，甚至无需修改 HTML 或使用 JavaScript。

CSS 解决方案：

将文本输入字段转换为类似密码的字段CSS 提供了一个名为 -webkit-text-security（或 text-security）的实验性选择器。此选择器控制输入字段的视觉外观，并可用于设置文本输入的显示安全性。

实现：

要使用此解决方案，请应用 -将 webkit-text-security 或 text-security 选择器添加到所需的输入字段，并将值设置为 disk 或其他所需的字符。下面是一个示例：

<code class="css">input.pw {
  -webkit-text-security: disc;
  text-security: disc;
}</code>

用法：

要在文本和密码字段之间切换显示，您可以向表单添加一个按钮并使用 JavaScript 来从输入字段添加或删除 pw 类。

<code class="html"><input type="text" class="pw" value="abcd">

<button onclick="this.previousElementSibling.classList.toggle('pw')">Toggle '•'</button></code>

浏览器兼容性：

现代浏览器支持 -webkit-text-security 选择器，例如Chrome、Safari 和 Opera。对于 IE8 支持，您可以使用文本安全选择器。

附加说明：

此解决方案主要影响视觉呈现，并且不会阻止复制/粘贴功能默认。但是，您可以在 CSS 或 JavaScript 中实施其他措施来限制从输入字段进行复制和粘贴。

以上是如何仅使用 CSS 将文本输入字段转换为密码字段？的详细内容。更多信息请关注PHP中文网其他相关文章！