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

Question

我有以下 HTML 片段，由 js (codemirror). I'm creating an overlay mode 生成，我能够为解析的标记指定样式名称。

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

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

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

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

Answer 1

您不能直接将 type 属性更改为 css。

您可以使用 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>

Answer 2

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 &lowast;
color随意设置
css 区分大小写 - 为您的页面正确的第二个跨度

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

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

How to make text look like password with CSS style?

html

javascript

css

codemirror