我有一个输入字段，它在登录应用程序时基本上需要一个确认码(字母数字(。我想实现以下功能：当您键入每个字符时，会在文本字段中显示一小部分时间(比如1秒(，然后它会变成一个星号。
我想要这个的原因是什么？这有助于用户知道他/她在输入字段中键入的字符，并且不会影响安全性。
我试过什么？我试图使输入字段类型为"；密码"；但这会使键入的字符立即变成星号我不想要这个，我希望它显示1秒，然后变成星号。
<input type=password placeholder="Please enter your alphanumerical code" />
注意：我不想要上面的显示/隐藏切换按钮实现，因为我已经意识到了这一点，并且已经看到了答案，但这不是我想要的实现
我正在开发一个reactJS应用程序，所以最好是基于react、JS、JSX、HTML等的实现。谢谢：(
p.S这是我关于堆栈溢出的第一个问题，我还没有反应过来，所以请原谅我的错误。请随时询问您对该问题的任何疑问。
考虑以下算法：
输入时：
-
获取插入符号位置，
-
获取添加或删除的字符数
-
如果添加，
- 获取添加的字符
- 将它们插入shaddow字符串//做
- 在定义的时间后，或在下一次输入时，替换添加了带星号的字符(*(
-
如果删除
- 删除字符位置右侧删除的数字在阴影字符串中
屏蔽字符在超时时运行。如果在超时运行之前输入了某些内容，则会取消超时并立即屏蔽字符。如果键入速度非常快，则可以在很短的时间内看到多个字符。如果粘贴了多个字符，则会在超时滞后期间显示所有字符。
这里有一个实现：
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和掩码字符是硬编码的。两者都可以很容易地是动态的，或者在参数对象或类似对象中设置。
github有一个现成的解决方案：https://karaggeorge.github.io/react-better-password/