输入每个字符时如何隐藏输入字段中的文本？答案

【问题标题】：How to hide text in input field as you type each character?输入每个字符时如何隐藏输入字段中的文本？
【发布时间】：2021-09-21 08:38:54
【问题描述】：

我有一个输入字段，在登录应用程序时基本上需要一个确认码（字母数字）。我想实现以下功能：当您键入每个字符时，它会在文本字段中出现一小部分时间（比如 1 秒），然后变成一个星号。

我想要这个的原因是什么？这有助于用户了解他/她在输入字段中输入的字符，并且不会影响安全性。

我尝试了什么？我试图将输入字段类型设置为“密码”，但这会使字符立即输入星号。 我不想要这个，我希望它显示 1s 然后变成一个星号。

<input type=password placeholder="Please enter your alphanumerical code" />

注意：我不想要上述的显示/隐藏切换按钮实现，因为我已经意识到这一点，并且已经看到了有关该问题的答案，但这不是我的预期实施

我正在开发一个 reactJS 应用程序，因此基于 react、JS、JSX、HTML 等的实现将是首选。谢谢:)

P.S 这是我关于堆栈溢出的第一个问题，我很陌生，所以请原谅我的任何错误。如有任何疑问/疑问，请随时提出。

【问题讨论】：

标签： javascript html reactjs jsx

【解决方案1】：

github有现成的解决方案：https://karaggeorge.github.io/react-better-password/

【讨论】：

感谢@Deep1man3 提供此解决方案。但是有没有办法使用输入标签但使用某些功能来执行该功能来解决它？下载新包总是会增加应用程序的大小，最好将大小保持在尽可能小。
这应该是评论，不是答案。

【解决方案2】：

考虑以下算法：

输入时：

获取插入符号的位置，
获取添加或删除的字符数
如果添加，
- 获取添加的字符
- 将它们插入到影子字符串中 // 去做
- 在定义的时间后，或在下一次输入时，替换添加了带星号 (*) 的字符
如果删除

delete 删除字符 pos 右侧的数字在阴影字符串中

屏蔽字符在超时时运行。如果在超时运行之前输入了某些内容，则会取消超时并立即屏蔽字符。如果您键入得非常快，则可以在很短的时间内看到多个字符。如果粘贴多个字符，则超时延迟全部显示。

这是一个实现：

let maskInput = (function() {
  // Keep reference to timeout
  let timeoutRef = null;
  // Set field to all asterisks, keep cursor at current position
  function blankField(el) {
    // Cancel timeout if there is one
    if (timeoutRef) {
      clearTimeout(timeoutRef);
      timeoutRef = null;
    }
    // Get cursor position
    let cursorPos = el.selectionStart;
    // Mask values
    el.value = el.value.replace(/./g, '*');
    // Put cursor back in position
    el.setSelectionRange(cursorPos, cursorPos);
  }

  return function (el) {
    // Get the shaddow element
    let inp = document.getElementById('i1');
    // Get current cursor position
    let cursorPos = el.selectionStart;
    // Get number of characters added
    let numAdded = el.value.length - inp.value.length;
    // If characters were added
    if (numAdded > 0) {
      // Get characters added
      let charsAdded = el.value.slice(cursorPos - numAdded, cursorPos);
      // Insert characaters in inp
      let insertIdx = cursorPos - numAdded;
      inp.value = inp.value.substring(0, insertIdx) +
                 charsAdded +
                 inp.value.substring(insertIdx, inp.value.length);
      timeoutRef = setTimeout(() => blankField(el), 250);
    // If characters were deleted, delete numAdded characters
    // to the right of the current cursor position in inp
    } else if (numAdded < 0) {
      inp.value = inp.value.substring(0, cursorPos) +
                  inp.value.substring(cursorPos - numAdded, inp.value.length);
    }
  }
}());

<input id="i0" oninput="maskInput(this)">Enter text<br>
<input id="i1" readonly>Shaddow text

这假定侦听器位于输入元素上，并且阴影输入的 ID 和掩码字符是硬编码的。两者都可以很容易地是动态的或在参数对象或类似对象中设置。

【讨论】：