本文共 17513 字，大约阅读时间需要 58 分钟。

先看效果图。

html界面。

需自行引入<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>

另外：

需要引入的passwordkeyboard.css

* {	margin: 0;	padding: 0}body {	font: 1.5em Verdana, Sans-Serif;	background: #eee;	width: 100%;	overflow: hidden}.pass {	font-size: 40px;	text-align: center;	width: 45px;	height: 45px;	border-left: 1px solid;	border-bottom: 1px solid;	border-top: 1px solid}.pass_right {	border-right: 1px solid}.btn_number {	width: 33%}.btn_next {	margin-top: 30px;	width: 100%;	height: 40px;	background: #09f}.btn_next:hover {	background: coral}#password {	font: 2em Verdana, Sans-Serif;	-moz-border-radius: 5px;	-webkit-border-radius: 5px}#keyboard {	margin: 0;	padding: 0;	list-style: none}#keyboard li {	float: left;	margin: -1px 2px 2px -1px;	width: 33%;	height: 50px;	line-height: 50px;	text-align: center;	background: #fff;	-moz-border-radius: 5px;	-webkit-border-radius: 5px}#keyboard .tab {	width: 33%}#keyboard .cancle {	width: 33%}#keyboard .delete {	width: 33%}.on {	display: none}#keyboard li:hover {	position: relative;	top: 1px;	left: 1px;	border-color: #e5e5e5;	background: #a8a8a8;	cursor: pointer}

需要引入的fastclick.js

;(function() {	'use strict';	function FastClick(layer, options) {		var oldOnClick;		options = options || {};		this.trackingClick = false;		this.trackingClickStart = 0;		this.targetElement = null;		this.touchStartX = 0;		this.touchStartY = 0;		this.lastTouchIdentifier = 0;		this.touchBoundary = options.touchBoundary || 10;		this.layer = layer;		this.tapDelay = options.tapDelay || 200;		this.tapTimeout = options.tapTimeout || 700;		if(FastClick.notNeeded(layer)) {			return;		}		function bind(method, context) {			return function() {				return method.apply(context, arguments);			};		}		var methods = ['onMouse', 'onClick', 'onTouchStart', 'onTouchMove', 'onTouchEnd', 'onTouchCancel'];		var context = this;		for(var i = 0, l = methods.length; i < l; i++) {			context[methods[i]] = bind(context[methods[i]], context);		}		if(deviceIsAndroid) {			layer.addEventListener('mouseover', this.onMouse, true);			layer.addEventListener('mousedown', this.onMouse, true);			layer.addEventListener('mouseup', this.onMouse, true);		}		layer.addEventListener('click', this.onClick, true);		layer.addEventListener('touchstart', this.onTouchStart, false);		layer.addEventListener('touchmove', this.onTouchMove, false);		layer.addEventListener('touchend', this.onTouchEnd, false);		layer.addEventListener('touchcancel', this.onTouchCancel, false);		if(!Event.prototype.stopImmediatePropagation) {			layer.removeEventListener = function(type, callback, capture) {				var rmv = Node.prototype.removeEventListener;				if(type === 'click') {					rmv.call(layer, type, callback.hijacked || callback, capture);				} else {					rmv.call(layer, type, callback, capture);				}			};			layer.addEventListener = function(type, callback, capture) {				var adv = Node.prototype.addEventListener;				if(type === 'click') {					adv.call(layer, type, callback.hijacked || (callback.hijacked = function(event) {						if(!event.propagationStopped) {							callback(event);						}					}), capture);				} else {					adv.call(layer, type, callback, capture);				}			};		}		if(typeof layer.onclick === 'function') {			oldOnClick = layer.onclick;			layer.addEventListener('click', function(event) {				oldOnClick(event);			}, false);			layer.onclick = null;		}	}	var deviceIsWindowsPhone = navigator.userAgent.indexOf("Windows Phone") >= 0;	var deviceIsAndroid = navigator.userAgent.indexOf('Android') > 0 && !deviceIsWindowsPhone;	var deviceIsIOS = /iP(ad|hone|od)/.test(navigator.userAgent) && !deviceIsWindowsPhone;	var deviceIsIOS4 = deviceIsIOS && (/OS 4_\d(_\d)?/).test(navigator.userAgent);	var deviceIsIOSWithBadTarget = deviceIsIOS && (/OS [6-7]_\d/).test(navigator.userAgent);	var deviceIsBlackBerry10 = navigator.userAgent.indexOf('BB10') > 0;	FastClick.prototype.needsClick = function(target) {		switch(target.nodeName.toLowerCase()) {			case 'button':			case 'select':			case 'textarea':				if(target.disabled) {					return true;				}				break;			case 'input':				if((deviceIsIOS && target.type === 'file') || target.disabled) {					return true;				}				break;			case 'label':			case 'iframe':			case 'video':				return true;		}		return(/\bneedsclick\b/).test(target.className);	};	FastClick.prototype.needsFocus = function(target) {		switch(target.nodeName.toLowerCase()) {			case 'textarea':				return true;			case 'select':				return !deviceIsAndroid;			case 'input':				switch(target.type) {					case 'button':					case 'checkbox':					case 'file':					case 'image':					case 'radio':					case 'submit':						return false;				}				return !target.disabled && !target.readOnly;			default:				return(/\bneedsfocus\b/).test(target.className);		}	};	FastClick.prototype.sendClick = function(targetElement, event) {		var clickEvent, touch;		if(document.activeElement && document.activeElement !== targetElement) {			document.activeElement.blur();		}		touch = event.changedTouches[0];		clickEvent = document.createEvent('MouseEvents');		clickEvent.initMouseEvent(this.determineEventType(targetElement), true, true, window, 1, touch.screenX, touch.screenY, touch.clientX, touch.clientY, false, false, false, false, 0, null);		clickEvent.forwardedTouchEvent = true;		targetElement.dispatchEvent(clickEvent);	};	FastClick.prototype.determineEventType = function(targetElement) {		if(deviceIsAndroid && targetElement.tagName.toLowerCase() === 'select') {			return 'mousedown';		}		return 'click';	};	FastClick.prototype.focus = function(targetElement) {		var length;		if(deviceIsIOS && targetElement.setSelectionRange && targetElement.type.indexOf('date') !== 0 && targetElement.type !== 'time' && targetElement.type !== 'month') {			length = targetElement.value.length;			targetElement.setSelectionRange(length, length);		} else {			targetElement.focus();		}	};	FastClick.prototype.updateScrollParent = function(targetElement) {		var scrollParent, parentElement;		scrollParent = targetElement.fastClickScrollParent;		if(!scrollParent || !scrollParent.contains(targetElement)) {			parentElement = targetElement;			do {				if(parentElement.scrollHeight > parentElement.offsetHeight) {					scrollParent = parentElement;					targetElement.fastClickScrollParent = parentElement;					break;				}				parentElement = parentElement.parentElement;			} while (parentElement);		}		if(scrollParent) {			scrollParent.fastClickLastScrollTop = scrollParent.scrollTop;		}	};	FastClick.prototype.getTargetElementFromEventTarget = function(eventTarget) {		if(eventTarget.nodeType === Node.TEXT_NODE) {			return eventTarget.parentNode;		}		return eventTarget;	};	FastClick.prototype.onTouchStart = function(event) {		var targetElement, touch, selection;		if(event.targetTouches.length > 1) {			return true;		}		targetElement = this.getTargetElementFromEventTarget(event.target);		touch = event.targetTouches[0];		if(deviceIsIOS) {			selection = window.getSelection();			if(selection.rangeCount && !selection.isCollapsed) {				return true;			}			if(!deviceIsIOS4) {				if(touch.identifier && touch.identifier === this.lastTouchIdentifier) {					event.preventDefault();					return false;				}				this.lastTouchIdentifier = touch.identifier;				this.updateScrollParent(targetElement);			}		}		this.trackingClick = true;		this.trackingClickStart = event.timeStamp;		this.targetElement = targetElement;		this.touchStartX = touch.pageX;		this.touchStartY = touch.pageY;		if((event.timeStamp - this.lastClickTime) < this.tapDelay) {			event.preventDefault();		}		return true;	};	FastClick.prototype.touchHasMoved = function(event) {		var touch = event.changedTouches[0],			boundary = this.touchBoundary;		if(Math.abs(touch.pageX - this.touchStartX) > boundary || Math.abs(touch.pageY - this.touchStartY) > boundary) {			return true;		}		return false;	};	FastClick.prototype.onTouchMove = function(event) {		if(!this.trackingClick) {			return true;		}		if(this.targetElement !== this.getTargetElementFromEventTarget(event.target) || this.touchHasMoved(event)) {			this.trackingClick = false;			this.targetElement = null;		}		return true;	};	FastClick.prototype.findControl = function(labelElement) {		if(labelElement.control !== undefined) {			return labelElement.control;		}		if(labelElement.htmlFor) {			return document.getElementById(labelElement.htmlFor);		}		return labelElement.querySelector('button, input:not([type=hidden]), keygen, meter, output, progress, select, textarea');	};	FastClick.prototype.onTouchEnd = function(event) {		var forElement, trackingClickStart, targetTagName, scrollParent, touch, targetElement = this.targetElement;		if(!this.trackingClick) {			return true;		}		if((event.timeStamp - this.lastClickTime) < this.tapDelay) {			this.cancelNextClick = true;			return true;		}		if((event.timeStamp - this.trackingClickStart) > this.tapTimeout) {			return true;		}		this.cancelNextClick = false;		this.lastClickTime = event.timeStamp;		trackingClickStart = this.trackingClickStart;		this.trackingClick = false;		this.trackingClickStart = 0;		if(deviceIsIOSWithBadTarget) {			touch = event.changedTouches[0];			targetElement = document.elementFromPoint(touch.pageX - window.pageXOffset, touch.pageY - window.pageYOffset) || targetElement;			targetElement.fastClickScrollParent = this.targetElement.fastClickScrollParent;		}		targetTagName = targetElement.tagName.toLowerCase();		if(targetTagName === 'label') {			forElement = this.findControl(targetElement);			if(forElement) {				this.focus(targetElement);				if(deviceIsAndroid) {					return false;				}				targetElement = forElement;			}		} else if(this.needsFocus(targetElement)) {			if((event.timeStamp - trackingClickStart) > 100 || (deviceIsIOS && window.top !== window && targetTagName === 'input')) {				this.targetElement = null;				return false;			}			this.focus(targetElement);			this.sendClick(targetElement, event);			if(!deviceIsIOS || targetTagName !== 'select') {				this.targetElement = null;				event.preventDefault();			}			return false;		}		if(deviceIsIOS && !deviceIsIOS4) {			scrollParent = targetElement.fastClickScrollParent;			if(scrollParent && scrollParent.fastClickLastScrollTop !== scrollParent.scrollTop) {				return true;			}		}		if(!this.needsClick(targetElement)) {			event.preventDefault();			this.sendClick(targetElement, event);		}		return false;	};	FastClick.prototype.onTouchCancel = function() {		this.trackingClick = false;		this.targetElement = null;	};	FastClick.prototype.onMouse = function(event) {		if(!this.targetElement) {			return true;		}		if(event.forwardedTouchEvent) {			return true;		}		if(!event.cancelable) {			return true;		}		if(!this.needsClick(this.targetElement) || this.cancelNextClick) {			if(event.stopImmediatePropagation) {				event.stopImmediatePropagation();			} else {				event.propagationStopped = true;			}			event.stopPropagation();			event.preventDefault();			return false;		}		return true;	};	FastClick.prototype.onClick = function(event) {		var permitted;		if(this.trackingClick) {			this.targetElement = null;			this.trackingClick = false;			return true;		}		if(event.target.type === 'submit' && event.detail === 0) {			return true;		}		permitted = this.onMouse(event);		if(!permitted) {			this.targetElement = null;		}		return permitted;	};	FastClick.prototype.destroy = function() {		var layer = this.layer;		if(deviceIsAndroid) {			layer.removeEventListener('mouseover', this.onMouse, true);			layer.removeEventListener('mousedown', this.onMouse, true);			layer.removeEventListener('mouseup', this.onMouse, true);		}		layer.removeEventListener('click', this.onClick, true);		layer.removeEventListener('touchstart', this.onTouchStart, false);		layer.removeEventListener('touchmove', this.onTouchMove, false);		layer.removeEventListener('touchend', this.onTouchEnd, false);		layer.removeEventListener('touchcancel', this.onTouchCancel, false);	};	FastClick.notNeeded = function(layer) {		var metaViewport;		var chromeVersion;		var blackberryVersion;		var firefoxVersion;		if(typeof window.ontouchstart === 'undefined') {			return true;		}		chromeVersion = +(/Chrome\/([0-9]+)/.exec(navigator.userAgent) || [, 0])[1];		if(chromeVersion) {			if(deviceIsAndroid) {				metaViewport = document.querySelector('meta[name=viewport]');				if(metaViewport) {					if(metaViewport.content.indexOf('user-scalable=no') !== -1) {						return true;					}					if(chromeVersion > 31 && document.documentElement.scrollWidth <= window.outerWidth) {						return true;					}				}			} else {				return true;			}		}		if(deviceIsBlackBerry10) {			blackberryVersion = navigator.userAgent.match(/Version\/([0-9]*)\.([0-9]*)/);			if(blackberryVersion[1] >= 10 && blackberryVersion[2] >= 3) {				metaViewport = document.querySelector('meta[name=viewport]');				if(metaViewport) {					if(metaViewport.content.indexOf('user-scalable=no') !== -1) {						return true;					}					if(document.documentElement.scrollWidth <= window.outerWidth) {						return true;					}				}			}		}		if(layer.style.msTouchAction === 'none' || layer.style.touchAction === 'manipulation') {			return true;		}		firefoxVersion = +(/Firefox\/([0-9]+)/.exec(navigator.userAgent) || [, 0])[1];		if(firefoxVersion >= 27) {			metaViewport = document.querySelector('meta[name=viewport]');			if(metaViewport && (metaViewport.content.indexOf('user-scalable=no') !== -1 || document.documentElement.scrollWidth <= window.outerWidth)) {				return true;			}		}		if(layer.style.touchAction === 'none' || layer.style.touchAction === 'manipulation') {			return true;		}		return false;	};	FastClick.attach = function(layer, options) {		return new FastClick(layer, options);	};	if(typeof define === 'function' && typeof define.amd === 'object' && define.amd) {		define(function() {			return FastClick;		});	} else if(typeof module !== 'undefined' && module.exports) {		module.exports = FastClick.attach;		module.exports.FastClick = FastClick;	} else {		window.FastClick = FastClick;	}}());

需要引入的ladingPasswordConfirm.js

var check_pass_word = '';var passwords = $('#password').get(0);$(function() {	var div = '\	
   
    \		
    
     \			
     
1
\			
     
2
\			
     
3
\			
     
4
\			
     
5
\			
     
6
\			
     
7
\			
     
8
\			
     
9
\			
     
删除
\			
     
0
\			
     
取消
\		
    
\	
   
\	';	var character, index = 0;	$("input.pass").attr("disabled", true);	$("#password").attr("disabled", true);	$("#keyboardDIV").html(div);	$('#keyboard li').click(function() {		if($(this).hasClass('delete')) {			$(passwords.elements[--index % 6]).val('');			if($(passwords.elements[0]).val() == '') {				index = 0;			}			return false;		}		if($(this).hasClass('cancle')) {			parentDialog.close();			return false;		}		if($(this).hasClass('symbol') || $(this).hasClass('tab')) {			character = $(this).text();			$(passwords.elements[index++ % 6]).val(character);			if($(passwords.elements[5]).val() != '') {				index = 0;			}			if($(passwords.elements[5]).val() != '') {				var temp_rePass_word = '';				for(var i = 0; i < passwords.elements.length; i++) {					temp_rePass_word += $(passwords.elements[i]).val();				}				check_pass_word = temp_rePass_word;				$("#key").hide();				var action = 'modify';				$.ajax({					url: 'confirmLadingPassword.do',					type: 'post',					data: {						userName: 'heboy18',						ladingPassword: check_pass_word					},					dataType: 'json',					success: function(data) {						var result = JSON.stringify(data);						if(result == "\"验证通过\"") {							if(action == "modify") {								window.parent.document.getElementById("modify_div").style.display = '';								window.parent.document.getElementById("modify_ladingPassword").disabled = 'disabled';								window.parent.document.getElementById("oldLadingPassword").value = check_pass_word;								parentDialog.close();							} else if(action == "set") {								var ladingId = parent.window.document.getElementById("ladingId").value;								var ladingType = parent.window.document.getElementById("ladingType").value;								parent.window.location.href = "indexSeting.do";							}						} else {							var result_text = '\                           		提货密码\                           		验证失败\                           		';							$("#set_text").html(result_text);							$("#key").show();							for(var i = 0; i < passwords.elements.length; i++) {								$(passwords.elements[i]).val('');							}						}					},					error: function(data) {						var result_text = '\                           网络异常\                           验证失败\                           ';						$("#set_text").html(result_text);						var t = 1;						var t1 = window.setInterval(function() {							t--;							if(t == 0) {								window.clearInterval(t1);								if('set' == action) {									parent.window.location.href = "queryLadingDetailWeixin.do";								} else if('modify' == action)									parent.window.location.href = "#";							}						}, 1000);					}				});			}		}		return false;	});});(function() {	function tabForward(e) {		e = e || window.event;		var target = e.target || e.srcElement;		if(target.value.length === target.maxLength) {			var form = target.form;			for(var i = 0, len = form.elements.length - 1; i < len; i++) {				if(form.elements[i] === target) {					if(form.elements[i++]) {						form.elements[i++].focus();					}					break;				}			}		}	}	var form = document.getElementById("password");	form.addEventListener("keyup", tabForward, false);	var set_text = '\	请输入\	密码\	，进行操作\	';	$("#set_text").html(set_text);})();

转载地址：http://sxnws.baihongyu.com/