获取输入type = text看起来像type = password

Question

TL;博士

我有一个输入type=text,我希望显示星星像输入type=password只使用CSS.

---

基本上我有一个表格,输入如下:

<input type='text' value='hello' id='cake' />

我没有生成表单,我根本无法访问它的HTML.但我可以访问应用于页面的CSS.

我喜欢它的行为就像type=password是 - 显示用户键入的内容而不是输入的实际文本.基本上,我希望那个方面(用户输入的呈现)看起来像一个type=password字段.

由于这似乎只是一个演示问题,我认为必须有一种方法来使用CSS,因为它在其责任域中.但是 - 我还没有找到这样的方法.我必须支持IE8 +,但我宁愿有一个适用于现代浏览器的解决方案,完全没有解决方案.防止复制/粘贴功能的额外点,但我可以没有它.

注意: 如果不清楚,我无法向页面添加HTML或JavaScript - 仅限CSS.

---

(我发现的只有这个问题,但它正在处理与jQuery相关的问题,它有一个JavaScript解决方案)

Answer 1

就像@ThiefMaster建议的那样

input.pw {
    -webkit-text-security: disc;
}

但是,这将适用于webkit后代的浏览器.. Opera,Chrome和Safari,但对其余的支持不多,另一个解决方案是使用webfonts.

使用任何字体编辑实用程序(如FontForge)来创建包含所有字符*(或任何所需符号)的字体.然后使用CSS Web字体将它们用作自定义字体.

Answer 2

您可以创建仅由点组成的字体

@font-face
    {
    font-family:'dotsfont';
    src:url('dotsfont.eot');
    src:url('dotsfont.eot?#iefix')  format('embedded-opentype'),
        url('dotsfont.svg#font')    format('svg'),
        url('dotsfont.woff')        format('woff'),
        url('dotsfont.ttf')         format('truetype');
    font-weight:normal;
    font-style:normal;
}

input.myclass
    {-webkit-text-security:disc;font-family:dotsfont;}

这可能就是你要找的......

有许多字形要定义,但可能有一种更简单的方法.你可以创建一个完全空的字体,只定义.notdef字形(字形ID 0),当另一个字形未定义时,它用作替换

你可能知道,它通常看起来像这样:

因此,您应该用点/星号替换它并测试浏览器会发生什么...因为我不确定它是否适用于所有这些(有些人可能想要使用自己缺少的字形替换).如果您尝试,请告诉我......

HTH

Answer 3

在基于WebKit的浏览器中,您可以使用该-webkit-text-security属性执行此操作.它甚至允许您选择子弹的形状(圆盘,圆形,方形).

input.pw {
    -webkit-text-security: disc;
}

演示:http://jsfiddle.net/ThiefMaster/6uJJw/1/

但是,这显然是非标准的.至少Safari CSS文档称它是"Apple扩展".它在Chrome中运行良好 - 显然 - 但我不认为任何其他渲染引擎支持它...

Answer 4

您可以使用自定义字体输入文本来创建虚假密码输入。以下作品适用于chrome、firefox、edge ...

@font-face {
  font-family: 'password';
  font-style: normal;
  font-weight: 400;
  src: url(https://jsbin-user-assets.s3.amazonaws.com/rafaelcastrocouto/password.ttf);
}

input.key {
  font-family: 'password';
  width: 100px; height: 16px;  
}

<p>Password: <input class="key" type="text" autocomplete="off" /></p>

感谢@rafaelcastrocouto 原始答案