如何让 <input> 将 *** 显示为纯文本答案

【问题标题】：How can one make <input> to show *** instead as plain text如何让 <input> 将 *** 显示为纯文本
【发布时间】：2020-05-27 13:00:22
【问题描述】：

我希望 id=demo (/document.getElementById("demo").innerHTML) 的值 myInput3 像 **** 一样输出。

当前行为以纯文本形式显示 myInput3 的值。

即如果我在 myInput3 中输入 abcd1234，我想在 id=demo

中看到 ********

<script>

function myFunction() {
  var x = document.getElementById("myInput").value + ' ' + document.getElementById("myInput2").value + ' ' + document.getElementById("myInput3").value;
  document.getElementById("myInput3").value;
  document.getElementById("demo").innerHTML = "Your details are: " + x;
}


</script>

<p>Write something in the text field to trigger a function.</p>

<div>Name:</div> <div><input type="text" id="myInput" oninput="myFunction()"></div>
<div>Username:</div> <div><input type="text" id="myInput2" oninput="myFunction()"></div>
<div>Password:</div> <div><input type="password" id="myInput3" oninput="myFunction()"><div>

<p id="demo"></p>

【问题讨论】：

The current behaviour prints 'myInput3' in plaintext. 如果你想要一个破坏性的 html 字符，那么你想要 <br/> 吗？

标签： javascript forms join concatenation

【解决方案1】：

您可以使用 repeat() 重复字符 (*)，直到密码字段中字符的长度：

 var pass = document.getElementById("myInput3").value.trim();
 pass = '*'.repeat(pass.length);

<script>

function myFunction() {
  var pass = document.getElementById("myInput3").value.trim();
  pass = '*'.repeat(pass.length);
  var x = document.getElementById("myInput").value + ' ' + document.getElementById("myInput2").value + ' ' + pass;
  document.getElementById("myInput3").value;
  document.getElementById("demo").innerHTML = "Your details are: " + x;
}


</script>

<p>Write something in the text field to trigger a function.</p>

<div>Name:</div> <div><input type="text" id="myInput" oninput="myFunction()"></div>
<div>Username:</div> <div><input type="text" id="myInput2" oninput="myFunction()"></div>
<div>Password:</div> <div><input type="password" id="myInput3" oninput="myFunction()"><div>

<p id="demo"></p>

【讨论】：

【解决方案2】：

您可以使用正则表达式替换密码中的所有字符，如下所示：

<!DOCTYPE html>
<html>
<body>

<script>

function myFunction() {
  var x = document.getElementById("myInput").value + ' ' + 
  document.getElementById("myInput2").value + ' ' + 
  document.getElementById("myInput3").value.replace(/[\S]/g, "*")
  document.getElementById("demo").innerHTML = "Your details are: " + x;
}


</script>

<p>Write something in the text field to trigger a function.</p>

<div>Name:</div> <div><input type="text" id="myInput" oninput="myFunction()"></div>
<div>Username:</div> <div><input type="text" id="myInput2" oninput="myFunction()"></div>
<div>Password:</div> <div><input type="password" id="myInput3" oninput="myFunction()"><div>

<p id="demo"></p>



</body>
</html>

function myFunction() {
  var x = document.getElementById("myInput").value + ' ' + document.getElementById("myInput2").value + ' ' + document.getElementById("myInput3").value.replace(/[\S]/g, "*")
  document.getElementById("myInput3").value;
  document.getElementById("demo").innerHTML = "Your details are: " + x;
}

<!DOCTYPE html>
<html>
<body>



<p>Write something in the text field to trigger a function.</p>

<div>Name:</div> <div><input type="text" id="myInput" oninput="myFunction()"></div>
<div>Username:</div> <div><input type="text" id="myInput2" oninput="myFunction()"></div>
<div>Password:</div> <div><input type="password" id="myInput3" oninput="myFunction()"><div>

<p id="demo"></p>



</body>
</html>

【讨论】：

非常欢迎！如果您接受答案会很好：D 谢谢！