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.

回答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

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

回答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">

回答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.

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

来源：https://stackoverflow.com/questions/37186309/make-password-textbox-value-visible-after-each-character-input

标签

javascript

jquery

html

ASP.NET