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

password input masking with delay, android style in javascript/jquery

本文关键字：jquery 中的 android 风格 javascript 密码 输入 屏蔽 延迟      更新时间：2023-09-26

让我首先说我的任务已经完成。但我正在努力了解它是如何工作的，有一件事让我感到困惑。换句话说，我偶然发现了答案。

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

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

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

它非常简单，而且效果很好。按下每个键后，2秒钟后变为*每个按键都有自己的定时器。但有一件大事我不明白。当setTimeout的回调触发时，上面的代码似乎会将文本框的整个内容设置为*s。因为上面的"替换"会将值的全部内容替换为非*的任何字符。

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

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

是的，你是对的。

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

相关文章：