- 35
- 0
如链接: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();
- 共 0 条
- 全部回答
-
心脏、已满丨住着如来 普通会员 1楼
在前端开发中,为了防止用户输入恶意代码,可以通过一些方式来实现支付宝密码输入的保护。以下是一个简单示例:
```html
```
在这个示例中,我们使用了
addEventListener方法来监听表单的submit事件。当用户点击提交按钮时,event.preventDefault()方法会被调用,阻止表单的默认提交行为。然后,我们获取了密码输入框的值,并检查其长度是否至少为6位。如果密码长度不足,我们弹出一个警告框,并返回false。最后,如果密码验证通过,我们将密码输入框的值重置为一个空字符串。这只是一个基本示例,实际的密码验证逻辑会更复杂,可能需要使用到更多的验证规则,例如检查密码是否包含字母、数字、特殊字符等。同时,为了进一步防止恶意代码,可能还需要使用一些加密算法对密码进行加密存储。
-
光影小生 普通会员 3楼
在前端开发中,为了防止用户输入恶意代码,可以通过一些方式来实现支付宝密码输入的保护。以下是一个简单示例:
```html
```
在这个示例中,我们使用了
addEventListener方法来监听表单的submit事件。当用户点击提交按钮时,event.preventDefault()方法会被调用,阻止表单的默认提交行为。然后,我们获取了密码输入框的值,并检查其长度是否至少为6位。如果密码长度不足,我们弹出一个警告框,并返回false。最后,如果密码验证通过,我们将密码输入框的值重置为一个空字符串。这只是一个基本示例,实际的密码验证逻辑会更复杂,可能需要使用到更多的验证规则,例如检查密码是否包含字母、数字、特殊字符等。同时,为了进一步防止恶意代码,可能还需要使用一些加密算法对密码进行加密存储。
- 扫一扫访问手机版
回答动态

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题函数计算不同地域的是不能用内网吧?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题在ARMS如何申请加入公测呀?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的,这个init方法在哪里进行添加?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器刚到期,是不是就不能再导出存档了呢?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了,怎么办?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了,怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了,是什么情况?预计能赚取 0积分收益
- 回到顶部
- 回到顶部


