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

Posted

技术标签:

【中文标题】在每个字符输入后使密码文本框值可见【英文标题】：Make password textbox value visible after each character input 【发布时间】：2016-09-08 06:03:04 【问题描述】：

我有一个密码字段：

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

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

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

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

【问题讨论】：

我没有尝试任何东西，只是通过谷歌但没有找到解决方案 谷歌搜索不到 1 分钟后：css-tricks.com/better-password-inputs-iphone-style 也许最好使用隐藏字段并显示文本的最后一个字符 你也可以使用这个插件blog.decaf.de/2009/07/07/… 【参考方案1】：

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

<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

【讨论】：

我不想添加任何额外的脚本或库文件，只是建议我简单的 jquery 或 js 代码，我可以在不包含任何 嗨@Garvit，这个解决方案有一个错误。如果您选择密码字段中插入的文本并写入新值，则会附加“隐藏”字段中的新字符（不清除输入）。修复应该非常快:) @Gio 如果您知道，请提供修复。这真的很有帮助。【参考方案2】：

我从“Garvit Mangal”获得灵感，创建了一个 JQuery 插件

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

它可以选择设置预览按钮和预览图标的自定义字体图标以及一些增强功能。

它可以与预览图标一起使用，如下所示

$(".pass").xpassword(preview : true, previewFontClass : 'iconview');

并且没有预览图标

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

【讨论】：

【参考方案3】： 

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

如何设置 setTimeout 函数并显示 10-15 秒。

【讨论】：

【参考方案4】：

只是一个想法，您可以添加一个隐藏字段来保存您的密码，同时将可见的输入内容转换为点。

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

【讨论】：

迄今为止我见过的最好的样本。 我试过这样： 并将您的 javascript 代码放在页面顶部，但没有任何变化:( 而且我不想添加任何额外的脚本或库文件，只是建议我简单的 jquery 或 js 代码，我可以在不包含任何 I put your javascript code on the top of the page：没有。你不能把它放在那里你必须把我的代码放在$(document).ready();。查看我的编辑。 它已经在 document.ready 中了。我只是将您的代码复制并粘贴到脚本标签中，然后将该脚本放在页面末尾【参考方案5】：

您可以使用 Jquery 插件来完成此操作。这是获取插件的链接https://github.com/panzj/jquery-mobilePassword/blob/master/js/jquery.mobilePassword.js

这是代码，

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

    );

HTML 代码：

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

【讨论】：

@AlinaAnjum 你是否包含了那个 Jquery 插件？ @AlinaAnjum 1) 从上面给出的链接复制 Javascript 文件的内容。 2) 将其粘贴到一个文件中，并使用您想要的任何名称保存该文件。但请确保扩展名是“.js”。我在“”下面包含了完整的代码

以上是关于在每个字符输入后使密码文本框值可见的主要内容，如果未能解决你的问题，请参考以下文章

如何获取 HTML 文本框值？

如何根据文本框值过滤列表框值

javascript：在用户键入或更改文本框值时忽略无效输入[重复]

检查文本框值是数字还是字符串[重复]

如何使用javascript验证动态生成的输入框值

WPF - 根据另一个文本框值更改文本框值[重复]