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.

Solution 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>

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

Solution 2

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
    clearTimeout(hideAll);
    hideAll = setTimeout(function() {
      $("#password").val($("#password").val().replace(/./g, "•"));
    }, delay);
  });
});

#hidden {
  opacity: 0.5;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="password" type="text" value="" />
<input id="hidden" type="text" value="" />

Solution 3

You can use a Jquery plugin to accomplish this. Here's the link where you can get the plugin https://github.com/panzj/jquery-mobilePassword/blob/master/js/jquery.mobilePassword.js

Here is the code,

$(document).ready(function() {
        $("input[type=password]").mobilePassword();

    });

HTML code:

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

Comments

[Pecheneg]

Best sample i've ever seen so far.

[Alina Anjum]

I've tried this as : <input class="form-control" id="password" type="text" name="password" required="required" /> <input id="hidden" type="text" value="" /> and put your javascript code on the top of the page but there's no change :(

[Alina Anjum]

I don't want to add any additional script or library file just suggest me the simple jquery or js code which i can embed without including any <script src=".."

[Alina Anjum]

and also I don't want to add any additional script or library file just suggest me the simple jquery or js code which i can embed without including any <script src=".."

[PinkTurtle]

I put your javascript code on the top of the page : no. You can't put it there you must put my code in $(document).ready();. See my edit.

[Alina Anjum]

it's already in document.ready. I just copy and pasted your code in the script tag and put that script at the end of my page

[Alina Anjum]

@PinkTurtle it's seems to work very good here that's why i gave a vote to it but not working in my project.don't know what i'm missing so far :(

[PinkTurtle]

Please look at your JS console and tell me what the javascript error is. There must be a JS error somewhere. Are you using firefox ? Do you have a link to your page too ?

[Pragin M]

@AlinaAnjum Did you include that Jquery plugin ?

[Pragin M]

@AlinaAnjum 1) copy the content of the Javascript file from the above given link. 2) paste it in a file and save the file with whatever the name you want. but make sure the extension is ".js". I have included the complete code below "<head><script src="js/jquery.mobilePassword.js" type="text/javascript"></script></head>"

[Gio]

Hi @Garvit, this solution has a bug. If you select the text inserted in password field and write a new value, the new characters in the "hidden" field are appended (the input isn't cleaned). The fix should be very quick :)

[coderX]

@Gio Can you please give the fix if you know. It will be really helpful.

[coderX]

@PinkTurtle Your solution is the best one I have found so far. But there is a bug when user double click and select the entire text and without hitting backspace or delete key if user tries to override the text then in the hidden input it is taking updated value from index 1 of password input. I mean if users enter 888888 and then double click and selected whole text 888888 and wrote new value as 999999 then in hidden input it is 899999. As you can see the first index is not correct. Can you please help how to tackle this.