如何将每次按键时的输入屏蔽为 html 输入字段中预定义字符串中的字符？

Question

我的动机是让观众相信某个字符串正在作为输入输入（通过在输入字段中逐字符显示，每次按键），而不管实际输入是什么is.The 表示实际输入必须保持不变并可供进一步使用。我试着修改密码字段以显示我想要的字符序列而不是点或星号，但显然这是不可行的。我要实现的目标与网站 www.peteranswers.com

上的 "petition" 字段完全一样

Answer 1

是这样的吗？

我能够使用事件侦听器和事件键相当轻松地完成此操作。假设存在id为"my_input"的输入框，我们可以做如下操作：

let string = 'Hello, World! ' // The "fake" input string
string = string.split(""); // Split string into array for easy indexing

let user_input = '';

let my_input = document.getElementById('my_input'); // Input field

my_input.onkeypress = function (e) {
    e.preventDefault();

    // Get the key pressed in string form so we can play with it
    let keypress_string = String.fromCharCode(e.keyCode);

    if (/[a-zA-Z0-9-_ ]/.test(keypress_string)) { // If alphanumeric
        this.value += string[user_input.length % string.length];
        user_input += keypress_string;
    }
}

my_input.onkeydown = function (e) {
    if (e.keyCode === 8) { // If backspace
        user_input = user_input.slice(0, -1) // Chop off the last character in the string
    }
}

在这种情况下，用户输入的实际字符串将存储在变量中user_input

如何将每次按键时的输入屏蔽为 html 输入字段中预定义字符串中的字符？

How do I mask the input with every key press as a character from a predefined string in an html input field?

html

javascript

css

input

masking