考虑到密码输入字段,我想显示输入的最后一个字符,以毫秒为单位,然后更改回正常的密码输入,如下所示:
var showLength = 1;
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="" />
上面的代码运行良好,除了一个恼人的问题:
如果输入123456789
并尝试删除输入字段中的第一个或第二个或任何字符,您将看到它只删除隐藏输入的最后一个字符(这是我们想要将其数据发送到服务器的输入字段)
似乎我们应该以某种方式检测类型光标的位置(可能通过鼠标或键盘上的箭头键移动)并删除该特定字符...
我们如何解决这个问题?
注意:我搜索了Stack Overflow,没有任何代码或jQuery插件可以正确地做到这一点。我希望有一个一劳永逸的解决方案。
1条答案
按热度按时间u0sqgete1#
我实际上已经试图使这成为可能,但某种或另一种方式,我错过了一两个案件。然后我在某种程度上使它成为可能,并将其作为一个NPM包。
请试试这个,看看是否有效。在我这边奏效了。
npm install last-typed-letter-password
https://www.npmjs.com/package/last-typed-letter-password