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.

Contents hide

Answers:

Method 1

Method 2

Method 3

Method 4

Method 5

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 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

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

Method 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">

Method 4

<!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.

Method 5

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

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes

Article Rating