密码输入屏蔽延迟，javascript / jquery中的android风格

Question

首先让我说我的任务已经完成。但是我试图弄清楚它是如何工作的，有一件事让我感到困惑。换句话说，我偶然发现了答案。

我的任务很简单：在输入框中，在用户输入时屏蔽输入，方法是在延迟后将每个字符更改为*。这就是android手机处理屏蔽输入的方式，与iPhone略有不同。

我使用了jQuery / javascript和regex的组合。我的工作代码：

$('.room_input').focus(function () {
    currentFocus = $(this);
});

$('.key').click(function () {
    setTimeout(function () {
        currentFocus.val(currentFocus.val().replace(/[^\*]/, '*'));
    }, 2000);
});

这很简单，效果很好。按下每个键时，它会在2秒后变为*。 每个键都有自己的计时器。但有一件事我不明白。当来自setTimeout的回调触发时，上面的代码似乎会将文本框的整个内容设置为*。因为上面的“替换”用任何不是*。

的字符替换了值的全部内容

但事实并非如此。每个键在点击后2秒后发生变化（应该如此）。 这是为什么？我认为它可能是正则表达式 - 它只会改变它找到的第一个匹配吗？我只回答了自己的问题吗？

更新：我做到了。 这是正则表达式。它只替换字符串中第一个匹配的字符。我在想它可能与单线程问题有关......像往常一样，我提出的问题比实际上要困难得多。 ：）

Answer 1

你是对的。

每次按键点击都会添加一个字符，然后启动一个计时器，稍后将第一个非星号变成星号。它比你想象的要简单得多。