在每个字符输入后使密码文本框值可见
我有一个密码字段：
当用户输入密码时，它默认为*****模式，
但是我想在这个字段中添加不同的东西意味着当用户输入密码中的任何一个字符时它应该显示一段时间然后将其转换为***。
我在Iphone中看到这样的事情，当用户输入密码时，当前输入的字符会显示一段时间然后它会变成****。 我怎么能在.net应用程序中这样做？ 请有人帮我解决这个问题，提前谢谢。
此代码段会自动将您的密码输入字段转换为文本字段，并将一个隐藏字段与您的密码字段同名
将转换为
在这里，我没有将另一个转换为隐藏用于演示目的。 看看它是否适合你
function createstars(n) { var stars = ""; for (var i = 0; i < n; i++) { stars += "*"; } return stars; } $(document).ready(function() { var timer = ""; $(".panel").append($('')); $(".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); }); });
您可以使用Jquery插件来完成此任务。 这是你可以获得插件的链接https://github.com/panzj/jquery-mobilePassword/blob/master/js/jquery.mobilePassword.js
这是代码，
$(document).ready(function() { $("input[type=password]").mobilePassword(); });
HTML代码：
只是一个想法，您可以在将可见输入内容转换为点时添加一个包含密码的隐藏字段。
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; }
我从“Garvit Mangal”中获取了想法，创建了一个JQuery插件
https://gist.github.com/tofeeq/92c5b5cd71af26d36a351969d2f97d8e
它可以选择设置预览按钮和预览图标的自定义字体图标以及一些增强function。
它可以与预览图标一起使用
$(".pass").xpassword({preview : true, previewFontClass : 'iconview'});
没有预览图标
$(".pass").xpassword();