本代码需要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();