用*隐藏密码的输入html [重复]答案

【问题标题】：Hide input html for password with * [duplicate]用*隐藏密码的输入html [重复]
【发布时间】：2021-11-08 17:18:39
【问题描述】：

我想用星号 (*) 隐藏密码输入。当我使用以下类型时：

<input type="password"/>

它用'.'（圆圈）隐藏，但我想用'*'隐藏。如何更改隐藏标记？

【问题讨论】：

标签： javascript html css reactjs

【解决方案1】：

你不能这样做。

元素显示为单行纯文本编辑器控件，其中的文本被遮盖以使其无法阅读，通常通过将每个字符替换为星号 ("*") 或点 ( “•”）。 此字符会因用户代理和操作系统而异。

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/password

【讨论】：

【解决方案2】：

无法使用某些属性更改符号。这取决于 userAgent 和操作系统。但是您仍然可以通过一些调整来进行操作。

const inputEl = document.querySelector('input');

const dummyEl = document.querySelector('#dummy');

const resultEl = document.querySelector('#result');

inputEl.addEventListener('keyup', () => {
  const dummyText = Array(inputEl.value.length).fill('*').join('');
  dummyEl.innerHTML = dummyText;
  resultEl.innerHTML = inputEl.value;
})

div {
  position: relative;
}
input {
  color: transparent;
}
span {
  position: absolute;
  top: 7px;
  left: 3px;
}

<div>
  <input type="password" />
  <span id="dummy"></span>
</div>
<div id="result"></div>

【讨论】：