html Input password encryption 前端 密码框加密

密码框加密

本代码需要Jquery 支持，并需要引入 JavaScript-MD5
支持自定义参数：
elemPassword：需要绑定加密的input 文本框（随便你写）
viewText：显示的字符（随便你写）
encryAttr：输入的字符串加密后绑定的属性（随便你写）
encryptionType：加密类型（需要可以自己扩展）
ignoreKey：忽略参数（前三位必须是 空格、Backspace、Delete）

一般默认调用即可，ignoreKey 参数最好不要动，必须保持数组前三位是 空格、Backspace、Delete，这三个涉及到事件的监听

 inputPasswordEncryption: function (options) {
                var option = $.extend(
                    {
                        elemPassword: '#password',
                        viewText: '●',
                        encryAttr: 'encry',
                        encryptionType: 'md5',
                        ignoreKey: [" ", "Backspace", "Delete", "F1", "F2", "F3", "F4", "F5", "F6", "F7", "F8", "F9", "F10", "F11", "F12", "Escape", "Tab", "CapsLock", "Shift", "Control", "Alt", "Meta", "ContextMenu", "PrintScreen", "ScrollLock", "Pause", "Insert", "Home", "End", "PageUp", "PageDown", "NumLock", "Enter", "ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "Process"]
                    }, options);

                var input = $(option.elemPassword),
                    encValue = "",
                    sourceValue = "",
                    cursortPosition = 0,
                    lastInputValue = "",
                    select = {
                        start: 0,
                        end: 0
                    },
                    keydownSelect = false,

                    initData = function () {
                        select.start = 0;
                        select.end = 0;
                        cursortPosition = 0;
                        lastInputValue = "";
                    },
                    getData = function (_this) {
                        select.start = _this.selectionStart;
                        select.end = _this.selectionEnd;
                        cursortPosition = getCursortPosition.call(_this, _this) - 1;
                        lastInputValue = input.val().substr(cursortPosition, 1);
                    },
                    getCursortPosition = function (ctrl) {
                        var CaretPos = 0;
                        if (document.selection) {
                            ctrl.focus();
                            var Sel = document.selection.createRange();
                            Sel.moveStart('character', -ctrl.value.length);
                            CaretPos = Sel.text.length;
                        }
                        else if (ctrl.selectionStart || ctrl.selectionStart == '0')
                            CaretPos = ctrl.selectionStart;
                        return (CaretPos);
                    },
                    updateSourceValue = function (_this, type) {
                        // 处理程序
                        var handleFunction = {
                            // 空格处理 （在索引前添加空格或者替换选中的字符）
                            Space: function () {
                                if (keydownSelect) {
                                    // 选中的有字符串，进行替换
                                    RemoveSourceValueGivenPositionStr();
                                }
                            },
                            Delete: function () {
                                if (keydownSelect) {
                                    // 选中的有字符串，进行替换
                                    RemoveSourceValueGivenPositionStr();
                                } else {
                                    var arr = sourceValue.split('');
                                    if (cursortPosition != -1) {
                                        if (arr.length - 1 != cursortPosition) {
                                            arr.splice(cursortPosition + 1, 1)
                                            sourceValue = arr.join('');
                                        }
                                    } else if (cursortPosition == -1 && arr.length > 0) {
                                        arr.splice(0, 1)
                                        sourceValue = arr.join('');
                                    }

                                }
                            },
                            Backspace: function () {
                                if (keydownSelect) {
                                    // 选中的有字符串，进行替换
                                    RemoveSourceValueGivenPositionStr();
                                } else {
                                    var arr = sourceValue.split('');
                                    if (cursortPosition != -1) {
                                        arr.splice(cursortPosition, 1)
                                        sourceValue = arr.join('');
                                    }
                                }
                            }
                        },
                            RemoveSourceValueGivenPositionStr = function () {
                                // 选中的有字符串，进行替换
                                var forNumber = select.end - select.start;
                                var arr = sourceValue.split('');
                                arr.splice(select.start, forNumber);
                                sourceValue = arr.join('');
                            }

                        switch (type) {
                            case option.ignoreKey[0]:
                                handleFunction.Space();
                                break;
                            case option.ignoreKey[1]:
                                handleFunction.Backspace();
                                break;
                            case option.ignoreKey[2]:
                                handleFunction.Delete();
                                break;
                            default:
                        }
                    };

                input.keydown(function (e) {
                    initData();
                    inputValue = input.val();
                    // 在keyDown时是否选中文本
                    keydownSelect = !(this.selectionStart == this.selectionEnd);
                    if (keydownSelect) {
                        getData(this);
                    }
                    if (option.ignoreKey.indexOf(e.key) > -1) {
                        cursortPosition = getCursortPosition.call(this, this) - 1;
                    }

                });
                input.keyup(function (e) {
                    if (option.ignoreKey.indexOf(e.key) > -1) {
                        updateSourceValue(this, e.key)
                    } else { // 不包含

                        // 是否选中
                        if (keydownSelect) {
                            var forNumber = select.end - select.start;
                            var arr = sourceValue.split('');
                            if (lastInputValue == "" || lastInputValue.length == 0) {
                                arr.splice(select.start, forNumber);
                            } else {
                                arr.splice(select.start, forNumber, e.key);
                            }
                            sourceValue = arr.join('');
                        } else {
                            getData(this);
                            // 没有选中
                            var arr = sourceValue.split('');
                            arr.splice(cursortPosition, 0, e.key)
                            sourceValue = arr.join('');
                        }
                    }
                    var result = "";
                    sourceValue.split('').forEach(function (value, index, array) {
                        result += option.viewText;
                    });
                    input.val(result);

                    if (sourceValue != "") {
                        switch (option.encryptionType.toLowerCase()) {
                            case "md5":
                                encValue = md5(sourceValue);
                                break;
                        }
                    } else {
                        encValue = "";
                    }
                    input.removeAttr(option.encryAttr).attr(option.encryAttr, encValue);
                });
            }

调用

inputPasswordEncryption();