javascript - 在每个字符输入后使密码文本框值可见

Question

我有一个密码字段:

 <input class="form-control" type="password" name="password" required="required" />

当然，当用户输入密码时，默认为*****模式，

但我想在此字段中添加一些不同的东西，这意味着当用户输入密码中的任何字符时，它应该显示一段时间，然后将其转换为 ***。

我在 Iphone 上看到这个东西，当用户输入密码时，当前输入的字符会显示一段时间，然后就变成 ****。我如何在 .net 应用程序中执行此操作？请有人帮我解决这个问题提前致谢。

Answer 1

此代码段会自动将您的密码输入字段转换为文本字段和一个与您的密码字段同名的隐藏字段

<input type="password" name="pass" class="pass" />

将转换为

<input type="text" class="pass" />
<input type="hidden" name="pass" class="hidpassw"/>

这里我没有将另一个转换为隐藏以用于演示目的。看看它是否适合你

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>

在搜索时找到了创建屏蔽密码字段的教程

这是工作演示的 jsbin 链接 creating masked password field

引用教程链接Tutorial