javascript - Make password textbox value visible after each character input

Question

I have a password field :

 <input class="form-control" type="password" name="password" required="required" />

Naturally when user enters password,it's in ***** pattern by default,

but I want to add something different in this field means when user enters any of the character from the password it should show it for a while then transform it into ***.

I saw this thing in Iphone that when user enters passcode , the currently entered character is shown for a while then it just get transformed into ****. How can i do this in .net application ? Kindly someone help me to resolve this Thanks in advance.

Answer 1

This snippet will automatically convert your password input field to text field and one hidden field with same name as your password field

<input type="password" name="pass" class="pass" />

will converted to

<input type="text" class="pass" />
<input type="hidden" name="pass" class="hidpassw"/>

Here i haven't converted another to hidden for demo purpose. See if it works for you or not

function createstars(n) {
  return new Array(n+1).join("*")
}


$(document).ready(function() {

  var timer = "";

  $(".panel").append($('<input type="text" class="hidpassw" />'));

  $(".hidpassw").attr("name", $(".pass").attr("name"));

  $(".pass").attr("type", "text").removeAttr("name");

  $("body").on("keypress", ".pass", function(e) {
    var code = e.which;
    if (code >= 32 && code <= 127) {
      var character = String.fromCharCode(code);
      $(".hidpassw").val($(".hidpassw").val() + character);
    }


  });

  $("body").on("keyup", ".pass", function(e) {
    var code = e.which;

    if (code == 8) {
      var length = $(".pass").val().length;
      $(".hidpassw").val($(".hidpassw").val().substring(0, length));
    } else if (code == 37) {

    } else {
      var current_val = $('.pass').val().length;
      $(".pass").val(createstars(current_val - 1) + $(".pass").val().substring(current_val - 1));
    }

    clearTimeout(timer);
    timer = setTimeout(function() {
      $(".pass").val(createstars($(".pass").val().length));
    }, 200);

  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="panel">
  <input type="password" name="paswd" class="pass" />
</div>