解决input password自动填充问题,仿ipone密码输入延时。

 下载的模仿ipone输入密码时,延时变成原点的效果。原文件在中文状态输入时有严重bug,经自行修复成如下代码,若用户时中文输入的话,会弹出提示并且无法继续输入,记录下以备后用:

(function($) {
	$.fn.iPass = function(options) {
		var settings = {
			'checkInterval': 100,
			'maskDelay': 50,
			'maskChar': '%u25CF'
		};
		if (options) {
			$.extend(settings, options)
		}
		var checkTimeout = [];
		var maskTimeout = [];
		var regex = new RegExp('[^' + unescape(settings['maskChar']) + ']', 'gi');
		var i = 0;
		this.each(function(index) {
			var suffix = '-' + index;
			var obj = $(this);
			var id = this.id;
			var name = this.name;
			var newId = id + suffix;
			var newName = id + suffix;
			if (!id || !name) {
				alert("You must set 'id' and 'name' attributes for elements!");
				return false
			}
			$('<input id="' + newId + '" name="' + newName + '" type="text" autocomplete="off" style="ime-mode: disabled" />').insertAfter(obj);
			var newObj = $('#' + newId);
			var newElem = $('#' + newId)[0];
			if (this.accessKey) {
				newElem.accessKey = this.accessKey
			}
			if (this.className) {
				newElem.className = this.className
			}
			if (this.disabled) {
				newElem.disabled = this.disabled
			}
			if (this.maxLength && this.maxLength != '-1') {
				newElem.maxLength = this.maxLength
			}
			if (this.readOnly) {
				newElem.readOnly = this.readOnly
			}
			if (this.size) {
				newElem.size = this.size
			}
			if (this.tabIndex) {
				newElem.tabIndex = this.tabIndex
			}
			if (this.title) {
				newElem.title = this.title
			}
			this.accessKey = '';
			this.tabIndex = '';
			obj.hide();
			var isZh=false;
			newObj.bind('focus', function() {
				newObj.attr("disabled",false);
				if(!isZh){
					var oldValue = newObj.val();
					checkTimeout[index] = setTimeout(function() {
						checkChange(index, id, newId, oldValue)
					}, settings['checkInterval'])
				}
				
			});
			newObj.bind('blur', function() {
				newObj.attr("disabled",false);
				if(!isZh){
					maskChar(index, newId);
					clearTimeout(checkTimeout[index])
				}
			});
			newObj.bind('compositionstart',function(){
				isZh=true;
				if(isZh){alert("不能输入中文");newObj.attr("disabled",true);}
			});
			$('label').each(function() {
				if (this.htmlFor == id) {
					this.htmlFor = newId
				} else if (obj[0].parentNode.tagName.toLowerCase() == 'label') {
					obj[0].parentNode.htmlFor = newId
				}
			})
		});
		checkChange = function(index, oldId, id, oldValue) {
			var curValue = $('#' + id).val();
			if (curValue != oldValue) {
				setPass(index, oldId, id)
			} else {
				maskChar(index, id)
			}
			oldValue = curValue;
			checkTimeout[index] = setTimeout(function() {
				checkChange(index, oldId, id, oldValue)
			}, settings['checkInterval'])
		};
		setPass = function(index, oldId, id) {
			var pos = getCurPos(id);
			var lastInputChar = false;
			var inpObj = $('#' + id);
			var passObj = $('#' + oldId);
			var inputChars = inpObj.val().split('');
			var passChars = passObj.val().split('');
			if (maskTimeout[index]) {
				clearTimeout(maskTimeout[index]);
				maskTimeout[index] = null
			}
			for (i = 0; i < inputChars.length; i++) {
				if (inputChars[i] != passChars[i]) {
					if (inputChars[i] != unescape(settings['maskChar'])) {
						passChars.splice(i, 0, inputChars[i])
					} else {
						passChars[i] = passChars[i]
					}
				} else {
					passChars.splice(i, 0, inputChars[i])
				}
			}
			if (inputChars.length < passChars.length) {
				passChars.splice(pos.start, passChars.length - inputChars.length, '')
			}
			for (i = 0; i < inputChars.length; i++) {
				if (inputChars[i] != unescape(settings['maskChar'])) {
					lastInputChar = i
				}
			}
			for (i = 0; i < inputChars.length; i++) {
				if (i < lastInputChar) {
					inputChars[i] = unescape(settings['maskChar'])
				}
			}
			inpObj.val(inputChars.join(''));
			passObj.val(passChars.join(''));
			setCurPos(id, pos)
		};
		maskChar = function(index, id) {
			var pos = getCurPos(id);
			var inpObj = $('#' + id);
			var curValue = inpObj.val();
			if (!maskTimeout[index] && curValue.match(regex) != null) {
				maskTimeout[index] = setTimeout(function() {
					inpObj.val(curValue.replace(regex, unescape(settings['maskChar'])));
					setCurPos(id, pos)
				}, settings['maskDelay'])
			};
			
			
		};
		getCurPos = function(id) {
			var input = $('#' + id)[0];
			var pos = {
				start: 0,
				end: 0
			};
			if (input.setSelectionRange) {
				pos.start = input.selectionStart;
				pos.end = input.selectionEnd
			} else if (input.createTextRange) {
				var bookmark = document.selection.createRange().getBookmark();
				var selection = input.createTextRange();
				var before = selection.duplicate();
				selection.moveToBookmark(bookmark);
				before.setEndPoint('EndToStart', selection);
				pos.start = before.text.length;
				pos.end = pos.start + selection.text.length
			}
			return pos
		};
		setCurPos = function(id, pos) {
			var input = $('#' + id)[0];
			if (input.setSelectionRange) {
				input.setSelectionRange(pos.start, pos.end)
			} else if (input.createTextRange) {
				var selection = input.createTextRange();
				selection.collapse(true);
				selection.moveEnd('character', pos.end);
				selection.moveStart('character', pos.start);
				selection.select()
			}
		}
	}
})(jQuery);

 该插件调用方法:$(".xxx").iPass();

优势:该插件可以完美解决浏览器自动填充密码或者提示账号对应密码的烦恼;

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值