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 Tricks

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

更新：

Mozilla/FireFox Explination

尝试一下：

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

在Firefox 69.0，Windows 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 += "*";
  }
}

唯一的问题是您将无法使用实际文本。

更新：添加了一个也将存储文本的变量。使用变量 actualText 访问原始文本;）此外，有关调用此函数的信息：您还必须在 input

的 onkeyup 事件中调用此函数

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

2 个答案: