使每个字符输入
我有密码字段后，密码文本框的值可见：使每个字符输入
<input class="form-control" type="password" name="password" required="required" />
当然，当用户输入密码时，它在*****默认模式，
，但我想在此字段中添加不同的内容意味着，当用户从密码输入任何字符时，它应该显示一段时间，然后将其转换为***。
我在iphone上看到这个东西，当用户输入密码时，当前输入的字符会显示一段时间，然后它会变成****。 我如何在.net应用程序中执行此操作？ 请别人帮我解决这个问题 提前致谢。
这个片段会自动将您的密码输入栏中的文本字段和一个隐藏字段具有相同的名称密码字段
<input type="password" name="pass" class="pass" />
将转换为
<input type="text" class="pass" />
<input type="hidden" name="pass" class="hidpassw"/>
在这里，我还没有转换另一个隐藏用于演示目的。看看它是否适合你或不
function createstars(n) {
var stars = "";
for (var i = 0; i < n; i++) {
stars += "*";
}
return stars;
}
$(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
只是一个id ea，您可以在将可见输入内容转换为点时添加一个隐藏字段来保存您的密码。
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代码我可以嵌入，而不包括任何
您可以使用一个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插件？ –
是的，我包括那 –
<!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>如何设置setTimeoutfunction和显示10 -15秒。
我没有试过任何刚刚通过谷歌，但没有找到解决方案 –
不到1分钟后谷歌搜索：https：// css-tricks。com/better-password-inputs-iphone-style/ –
也许最好使用隐藏字段并显示文本的最后一个字符 –