Make password textbox value visible after each character input

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.



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));

    timer = setTimeout(function() {
    }, 200);


<script src=""></script>
<div class="panel">
  <input type="password" name="paswd" class="pass" />

While searching found a tutorial for creating a masked password field

Here is a jsbin link to working demo creating masked password field

Link to the tutorial for reference Tutorial


Just an idea, you could add a hidden field holding your password while converting the visible input contents to dots.

var showLength = 3;
var delay = 1000;
var hideAll = setTimeout(function() {}, 0);

$(document).ready(function() {
  $("#password").on("input", function() {
    var offset = $("#password").val().length - $("#hidden").val().length;
    if (offset > 0) $("#hidden").val($("#hidden").val() + $("#password").val().substring($("#hidden").val().length, $("#hidden").val().length + offset));
    else if (offset < 0) $("#hidden").val($("#hidden").val().substring(0, $("#hidden").val().length + offset));

    // Change the visible string
    if ($(this).val().length > showLength) $(this).val($(this).val().substring(0, $(this).val().length - showLength).replace(/./g, "•") + $(this).val().substring($(this).val().length - showLength, $(this).val().length));

    // Set the timer
    hideAll = setTimeout(function() {
      $("#password").val($("#password").val().replace(/./g, "•"));
    }, delay);
#hidden {
  opacity: 0.5;
<script src=""></script>
<input id="password" type="text" value="" />
<input id="hidden" type="text" value="" />


You can use a Jquery plugin to accomplish this. Here's the link where you can get the plugin

Here is the code,

$(document).ready(function() {


HTML code:

<input type="password" name = "password" id = "password" placeholder = "password" class ="input">

<!DOCTYPE html>
<script src=""></script>
<input type="password" id="confirmPassword"  class="dropbtn">
<button  id="showConfirmPassword" value="show">show</button>
$('#confirmPassword').attr('type', 'text'); 
setTimeout(function(){$('#confirmPassword').attr('type', 'password'); }, 500);
$('#confirmPassword').attr('type', 'password');

How about setting setTimeoutfunction and display it for 10-15 secs.


I have created a JQuery Plugin by getting idea from "Garvit Mangal"

It has option to set preview button and a custom font icon for preview icon as well as some enhancements.

It can be used as below with the preview icon

$(".pass").xpassword({preview : true, previewFontClass : 'iconview'});

and without preview icon



Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.