CSS使文本字段看起来像密码字段

Question

如何将 html 中类型为text的输入字段的 CSS 设置为显示为密码字段，即输入中的文本似乎被替换为星号 ("*"( 或点 ("•"( 等符号？

我有这个约束：

<input name="passwordish" type="text" id="inputPassword" placeholder="Password" >

编辑：抱歉，如果不清楚，但由于一些雪片的原因，我无法更改字段类型！

Answer 1

建议将文本类型更改为密码

<input name="password" type="password" id="inputPassword" placeholder="Password" >

或者这个

CSS技巧

input { -webkit-text-security: none; }
input { -webkit-text-security: circle; }
input { -webkit-text-security: square; }
input { -webkit-text-security: disc; /* Default */ }

更新：

Mozilla/FireFox 解释

试试这个：

input {
text-security: circle; /* IE/Safari */
-moz-text-security: circle; /* FireFox */
-webkit-text-security: circle; /* Chrome/Safari  */
}

更新：

• Firefox 不再支持以下 css：

  • -webkit-text-security

  • -moz-text-security

在火狐 69.0、视窗 10、64 位、

Answer 2

你可以使用这个：

actualText = "";
function myFunction() {
var x = document.getElementById("myText").value;
var tempText = x.replace(/*/g,"");
if(tempText == "")
{
actualText = actualText.substr(0, actualText.length - 1);
}
else {
actualText += x.replace(/*/g,"");
}
document.getElementById("myText").value = "";
for (var i=0;i<x.length;i++)
{
document.getElementById("myText").value += "*";
}
}

唯一的问题是您将无法使用精算文本。

更新：添加了一个将存储文本的变量。使用变量实际文本 访问原始文本;) 另外关于调用此函数：您必须在输入的onkeyup事件中调用此函数