Question

我要将值设置为标签的密码显示为***（按字符显示）。

<label>password</label>

输出如下所示，因为标签值无论如何。

password

预期结果：

********

在我的情况下，它应该像********一样转换（根据不是字符）。

是js的新手。任何人都建议我这样做的关键点。

如何根据字符将其转换为*值的数量？

Answer 1

对于没有jQuery的纯Javascript，您可以使用split()将字符串转换为数组，然后使用map()根据条件修改每个元素。

var label = document.getElementById('password');

let replaceAll = (str, chars = []) => {
  return str.split('')
  .map(c => c.trim() && !chars.includes(c) ? '*' : c)
  .join('');
}
  
label.innerHTML = replaceAll(label.textContent, '*');

.container {
  margin: 5px;
  padding: 5px;
  border: 1px solid black;
}

span {
  margin: 5px;
  font-weight: bold;
}

<div class='container'>
  <span>Field without formatting</span>
  <label id='standard'>password</label>
  <hr />
  <span>Field with formatting</span>
  <label id='password'>password</label>
</div>

Answer 2

您无法在标签中存储*****以及密码的值，您可以使用具有可见性的输入：隐藏如下：

<input type="password" name="pwd" style="visibility: hidden"></input>
<label id="lblPwd"></label>

并在javascript中对其进行处理，以在标签中显示相同的值。

或者您可以使用输入并将css设置为像标签一样显示：

<style type="text/css">

.label{
    background:rgba(0,0,0,0);
    border:none;
}

</style>

<input type="password" class="label" disabled/>

Answer 3

这是另一个简单的解决方案：

<html>
<body>


<label id="passw">password</label>

<script>
var pass= document.getElementById("passw").innerHTML;
var char = pass.length;
var password ="";
for (i=0;i<char;i++)
{
password += "*";
}
document.getElementById("passw").innerHTML = password;
</script>

</body>
</html>

如何将标签值更改为密码字段值？

3 个答案: