账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    关于仿支付宝密码输入的一个问题,前端小白求指教
    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
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 在前端开发中,为了防止用户输入恶意代码,可以通过一些方式来实现支付宝密码输入的保护。以下是一个简单示例:

      ```html

      ```

      在这个示例中,我们使用了addEventListener方法来监听表单的submit事件。当用户点击提交按钮时,event.preventDefault()方法会被调用,阻止表单的默认提交行为。然后,我们获取了密码输入框的值,并检查其长度是否至少为6位。如果密码长度不足,我们弹出一个警告框,并返回false。最后,如果密码验证通过,我们将密码输入框的值重置为一个空字符串。

      这只是一个基本示例,实际的密码验证逻辑会更复杂,可能需要使用到更多的验证规则,例如检查密码是否包含字母、数字、特殊字符等。同时,为了进一步防止恶意代码,可能还需要使用一些加密算法对密码进行加密存储。

    • 光影小生 普通会员 3楼

      在前端开发中,为了防止用户输入恶意代码,可以通过一些方式来实现支付宝密码输入的保护。以下是一个简单示例:

      ```html

      ```

      在这个示例中,我们使用了addEventListener方法来监听表单的submit事件。当用户点击提交按钮时,event.preventDefault()方法会被调用,阻止表单的默认提交行为。然后,我们获取了密码输入框的值,并检查其长度是否至少为6位。如果密码长度不足,我们弹出一个警告框,并返回false。最后,如果密码验证通过,我们将密码输入框的值重置为一个空字符串。

      这只是一个基本示例,实际的密码验证逻辑会更复杂,可能需要使用到更多的验证规则,例如检查密码是否包含字母、数字、特殊字符等。同时,为了进一步防止恶意代码,可能还需要使用一些加密算法对密码进行加密存储。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部