CSS -webkit-text-security

-webkit-text-security

很多业务场景有需要输入密码功能，需要隐藏实际输入值，用其他符号替代。

-webkit-text-security 是一种在网页中掩盖文本的 CSS 属性。该属性可以用于保护敏感信息，如密码等。当文本被掩盖时，文本将被替换为指定的字符或符号。这使得文本无法被轻易地阅读和拷贝，从而提高了敏感信息的安全性。

可选值和语法

-webkit-text-security的语法和可选值

• none：文本不进行任何处理，显示原始文本。
• disc：将文本替换为实心圆点（•）。
• circle：将文本替换为空心圆圈（○）。
• square：将文本替换为空心方块（□）。
• disclosure-closed：将文本替换为实心三角形（▶）。
• disclosure-open：将文本替换为倒三角形（▼）。

.hide-text .el-input__inner {
  -webkit-text-security: disc;
}

兼容问题

目前，-webkit-text-security 属性仅在基于 WebKit 引擎的浏览器中进行兼容，包括Google Chrome、Safari 等。然而，该属性在其他主流浏览器中并不被支持，如Mozilla Firefox、Microsoft Edge 等。因此，在使用 -webkit-text-security 属性时，应注意浏览器的兼容性问题。

为了解决兼容性问题，可以使用其他解决方案，如 JavaScript 或服务器端加密。JavaScript 可以用来在所有浏览器中实现文本掩盖效果。而服务器端加密可以在后端处理敏感信息的显示，从而降低前端 CSS 属性的依赖性。

<input type="password" id="password-input" />

<script>
  const passwordInput = document.getElementById('password-input');
  passwordInput.addEventListener('input', () => {
    passwordInput.value = '*'.repeat(passwordInput.value.length);
  });
</script>