password input masking with delay, android style in javascript/jquery
<p>Let me start by saying that my task is complete. But I'm trying to get an understanding of how it's working, and one thing is confusing to me. In other words, I stumbled on the answer by accident.</p>

<p>My task was simple: in an input box, mask the input as the user types, by changing each character to * after a delay. This is how android phones handle masked input, slightly different than iPhone.</p>

<p>I used a combination of jQuery/javascript and regex. My working code:</p>

<pre><code>$('.room_input').focus(function () {
    currentFocus = $(this);
});

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

<p>It's pretty simple, and it works great. When each key is pressed, it changes to * after 2 seconds. <em>Each key is on its own timer</em>. But there is one major thing I don't understand. When the callback from setTimeout triggers, the code above seems like it would set the <em>entire</em> contents of the textbox to *'s. Because the "replace" above replaces the entire content of the value with any characters not *.</p>

<p>But it doesn't. Each key changes after 2 seconds from when it was clicked (as it should). 
Why is that? I'm thinking it might be the regex - does it only change the first match it finds? Did I just answer my own question?</p>

<p>UPDATE: I did.
It's the regex. It only replaces the <em>first</em> matched character in the string. I was thinking it maybe had something to do with single-threading issues... as usual, I'm making a problem much more difficult than it is. :)</p>
