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