如何使用 CSS 样式使文本看起来像密码？

Question

我有以下一段由 js 生成的 HTML（codemirror）。我正在创建一个覆盖模式，并且我能够为解析的标记指定样式名称。

<span class="text">Data Source=myServer;User ID=sa;Password=</span>
<span class="hiddenText">12345</span>
<span class="text">;</span>

我认为一旦解析了 token 并设置了样式，工作就应该完成了，因为你可以用 CSS 做任何事情，对吗？

但现在我意识到我不知道如何使“12345”字符串看起来像CSS样式的密码。它可以用星星替换（但仅在视觉上），隐藏在任何类型的盘子后面等。但它应该是可编辑和可复制的。

IDEA 有我可以使用的特殊字体吗？

Answer 1

2 种方法 - 都使真实内容在顶部不可见，但在源 html 代码中绝对可见，更多 -

::before

和

::after

始终在源中不可见

.hiddenText{ font-size: 0}             /* this makes span real content zero size width & height */
.hiddenText::before{ content: '∗∗∗∗∗'; font-size: initial}  

.HiddenText{ color: transparent; }    /* span will be as long as real content + ::before */
.HiddenText::before{ content: '∗∗∗∗∗'; color: initial}

<span class="hiddenText">I'm so secret</span>
<hr>
<span class="HiddenText">I'm so secret</span>

∗

这是 html

∗

color

随心所欲设置
css 区分大小写 - 正确的页面第二个跨度

选择最适合你的 - 其他父元素或子元素可能会影响，因为 css 是遗传的

Answer 2

您不能直接使用 css 更改 type 属性。

您可以使用 readOnly 输入属性以及 type="password" 属性。

您可以使用此代码：

<span class="text">Data Source=myServer;User ID=sa;Password=</span>
<input type="password" readOnly="true" class="hiddenText" value="12345">
<span class="text">;</span>