极客观点
项目管理
HarmonyOS
如链接：https://segmentfault.com/q/10...
我使用了二楼前辈制作的这个仿支付宝密码输入的插件，但是目前出现了问题，希望有前辈能帮忙改造一下。
作者后续可能没再更新这个插件了，也给作者git上提出了issue，但是作者没有回复。
问题如下：
我是结合lay弹窗使用这个密码输入插件的。例如：
用户银行卡解绑操作，用了已经填了N张银行卡，用户现在做解绑操作，在对应银行卡上点击解绑，弹出弹窗，弹窗中含有这个密码输入插件，要求用户输入自己设置的支付密码。
问题来了，这个插件可能不完善，并没有初始化与销毁的方法，用户在点击一张卡进行解绑操作时候，输入了支付密码，然后并没有确定，而是关闭了这个弹窗，然后点击另一种银行卡进行解绑操作，这时候打开的弹窗中密码输入插件中已经有了上一张操作时输入的密码，我试着在弹窗关闭回调中，清除指定元素下所有input的值，但是由于这个密码插件是有焦点控制的，由于第一次操作输入密码时候，控制焦点的参数active已经自增为5，所以导致在打开另一个弹窗输入密码时候，密码是清除掉了，但是焦点一直聚焦于最后一个输入框。
而我又是前端新手，不知道如何进行改造，让这个控制焦点的active参数能够重设为0，或者在这个插件中添加销毁和初始化方法。
打了这么多字，不知道我表达清楚没有，希望有前辈能够帮忙改造……十分感谢……
JS插件代码如下：
/**
* 密码框，类似支付宝支付密码框。
*/
(function($){
//键盘按键代码
var keyCode = {
8: "BACKSPACE",
46: "DELETE",
//数字键键值
48: "0",
49: "1",
50: "2",
51: "3",
52: "4",
53: "5",
54: "6",
55: "7",
56: "8",
57: "9",
//小键盘数字键键值
96: "0",
97: "1",
98: "2",
99: "3",
100:"4",
101:"5",
102:"6",
103:"7",
104:"8",
105:"9",
};
var getIput = function(){
return $("<input></input>")
.attr("maxlength","1")
.attr("type","password")
.attr("autocomplete","off")
.addClass("pwdInput");
}
var getGap = function(){
return $("<i></i>")
.addClass("gap");
}
$.fn.extend({
pwd:function(){
var pwdInput = [];
var active;
var parent;
var first;
var last;
var target = this;
var lastTime = 0;
function initPwdInput(target){
var length = $(target).attr("maxlength")>6? 6:$(target).attr("maxlength");
first = 0;
last = length - 1;
active = first;
var width = $(target).outerWidth(true);
var height = $(target).outerHeight(true);
var size = width / length;
//var height_one = height / length;
parent = $(target).parent();
var container = $("<div></div>").attr("id","pwdcontainer");
$(parent).append($(container));
$(target).hide();
for(var idx = 0;idx < length;idx++){
var input = getIput();
$(input)
.css("width",size)
.css("height",size)
.css("line-height",size)
.attr("data-index",idx)
.addClass("pwdInput");
$(container).append($(input));
if(idx != length -1) {
$(container).append($(getGap()));
}
pwdInput[idx] = $(input);
}
$(container).append($(target));
$(pwdInput[first]).addClass("first");
$(pwdInput[last]).addClass("last");
}
initPwdInput(this);
function bindKeyup(obj,callback) {
$(obj).bind("keyup",function(event){
if(lastTime == event.timeStamp){
return;
} else {
lastTime = event.timeStamp;
}
if((48 <= event.keyCode && event.keyCode <= 57) ||
(96 <= event.keyCode && event.keyCode <= 105)
){
if(active == last && $(obj).val() != "" ) {
$(obj).blur();
active++;
callback();
return;
}
$(obj).val(keyCode[event.keyCode]);
$(obj).blur();
active++;
callback();
} else if(
keyCode[event.keyCode] == "BACKSPACE" ||
keyCode[event.keyCode] == "DELETE"
){
if($(obj).val() != "") {
$(obj).val("");
$(obj).blur();
active--;
callback();
} else {
$(obj).blur();
active--;
callback();
}
} else {
$(obj).val("");
}
});
}
function unBindKeyup(obj) {
$(obj).unbind("keyup");
}
function setActive(){
$(pwdInput[active]).focus();
}
function callback() {
if(active < 0 ){
active = 0;
}
if(active > last) {
active = last
}
/* map,reduce方法在IE8+里不支持
var value = pwdInput
.map(function(item){
return $(item).val();
})
.reduce(function(a,b){
return a+""+b;
});
*/
var salt = "";
for(var idx = 0;idx < pwdInput.length;idx++) {
salt += $(pwdInput[idx]).val();
}
var value = randomString();
// $(target).val(value);
// $(target).val(hex_md5(salt)); // MD5加密
$(target).val(salt);
console.log({"value":value,"salt":salt});
$(pwdInput[active]).click();
}
function getValue() {
$(pwdInput).each(function(){
$(this).click(setActive);
$(this).focus(function(){
bindKeyup(this,callback);
});
$(this).blur(function(){
unBindKeyup(this);
});
});
}
function randomString(len) {
len = len || 32;
var $chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
var maxPos = $chars.length;
var str = '';
for (i = 0; i < len; i++) {
str += $chars.charAt(Math.floor(Math.random() * maxPos));
}
return str;
}
getValue();
}
})
})(jQuery);
使用发放是在需要调用这个插件的页面中js中添加 $(指定元素).pwd();