6

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.

4

5 Answers 5

10

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

3
  • 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=".." May 13, 2016 at 4:32
  • 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 :)
    – Gio
    Aug 29, 2017 at 17:34
  • @Gio Can you please give the fix if you know. It will be really helpful.
    – coderX
    Oct 19, 2021 at 13:13
6

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="" />

8
  • 1
    Best sample i've ever seen so far.
    – Pecheneg
    May 12, 2016 at 14:32
  • 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 :( May 13, 2016 at 4:25
  • 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=".." May 13, 2016 at 4:32
  • 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.
    – PinkTurtle
    May 13, 2016 at 9:56
  • 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 May 13, 2016 at 12:29
2

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">
2
  • @AlinaAnjum Did you include that Jquery plugin ?
    – Pragin M
    May 15, 2016 at 12:09
  • @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>"
    – Pragin M
    May 16, 2016 at 15:30
0

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<body>
<input type="password" id="confirmPassword"  class="dropbtn">
<button  id="showConfirmPassword" value="show">show</button>
<script>
$("#showConfirmPassword").click(function(){
$('#confirmPassword').attr('type', 'text'); 
setTimeout(function(){$('#confirmPassword').attr('type', 'password'); }, 500);
});
$('#confirmPassword').attr('type', 'password');
</script>
</body>
</html>

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

0

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

https://gist.github.com/tofeeq/92c5b5cd71af26d36a351969d2f97d8e

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

$(".pass").xpassword();

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.