仿QQ的软键盘 - No Comment

No Comment

我的日历

最新评论

友情链接

访问计数

收藏本站 设为首页

+------------------------------------------------------------------------------------------------------+

仿QQ的软键盘 [2005-8-31]
Xmercy 发表在 Plus

2003下测试IE和FF通过，主要还是用在安全上的辅助输入，比如输入密码
核心代码：

//我佛山人@05.08.20
String.prototype.Format = function(){
	var tmpStr = this;
	var iLen = arguments.length;
	for(var i=0;i<iLen;i++){
		tmpStr = tmpStr.replace(new RegExp("\\{" + i + "\\}", "g"), arguments[i]);
	}
	return tmpStr;
}
SoftKeyboard = {
	//region Property
	curCapture					 : null,
	curPosX						 : 0,
	curPosY						 : 0,
	capsLock					 : false,
	background				 : "/Plus/SoftKeyboard/Keyboard.jpg",

//region Process
	Display :
		function(captureObj, e){
			captureObj = typeof(captureObj) == "object" ? captureObj : document.getElementById(captureObj);
			if(window.event){
				SoftKeyboard.curPosX = document.body.scrollLeft + event.x;
				SoftKeyboard.curPosY = document.body.scrollTop + event.y;
				with(captureObj){
					detachEvent("onfocus", SoftKeyboard.ActiveText);
					detachEvent("onchange", SoftKeyboard.ActiveText);
					detachEvent("onkeypress", SoftKeyboard.ActiveText);
					attachEvent("onfocus", SoftKeyboard.ActiveText);
					attachEvent("onchange", SoftKeyboard.ActiveText);
					attachEvent("onkeypress", SoftKeyboard.ActiveText);
				}
			}
			else{
				SoftKeyboard.curPosX = e.pageX;
				SoftKeyboard.curPosY = e.pageY;
			}
			with(SoftKeyboard.Container()){
				if(captureObj != SoftKeyboard.curCapture) {
					SoftKeyboard.curCapture = captureObj;
					if(style.display == "block"){
						style.left = SoftKeyboard.curPosX + "px";
						style.top = SoftKeyboard.curPosY + "px";
					}
					else SoftKeyboard.Load();
				}
				else{
					if (style.display == "block") style.display = "none";
					else SoftKeyboard.Load();
				}
			}
		},
	Load :
		function(){
			var lowerStr = "58,60,26,6,11,13,14,16,17,18,19,20,21,22,23,24,15,64,65,66,67,68,69,70,71,72,73,74,75,76,77,78,79,80,81,82,83,84,85,86,87,88,89,63,12,28,59".split(",");
			var upperStr = "90,92,25,1,27,29,30,0,31,2,3,4,61,5,9,7,8,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,93,62,10,91".split(",");
			var len = lowerStr.length;
			var pos = Math.random() * len | 0;
			lowerStr = lowerStr.slice(pos).concat(lowerStr.slice(0,pos));
			upperStr = upperStr.slice(pos).concat(upperStr.slice(0, pos));
			var strHtml = "";
			SoftKeyboard.capsLock = false;
			for(var i=0; i<len; i++){
				var key = new SoftKeyboard.Key();
				with(key){
					lower = lowerStr[i]|0;
					upper = upperStr[i]|0;
					value = String.fromCharCode(lower + 33);
				}
				strHtml += key;
				if ((i + 1) % 12 == 0) strHtml += "";
			}
			strHtml += "<br />"  + new SoftKeyboard.SpaceKey() + new SoftKeyboard.ShiftKey() + new SoftKeyboard.BackSpaceKey() + new SoftKeyboard.EnterKey();
			with(SoftKeyboard.Container()){
				innerHTML = strHtml;
				style.left = SoftKeyboard.curPosX + "px";
				style.top = SoftKeyboard.curPosY + "px";
				style.display = {"block":"none", "none":"block"}[style.display];
			}
		},
	
	//region Class
	Key :
		function (){
			this.background = "";
			this.width = 20;
			this.height = 24;
			this.lower = "";
			this.upper = "";
			this.value = "";
			this.action = "SoftKeyboard.sendKey(this)";
			this.toString = function(){
				return '<input type="button" style="width:{1}px;height:{2}px;margin:1px;background-color:transparent;color:#304290;border:0;font:bold 11px Tahoma;text-align:center;line-height:24px;" lower="{3}" upper="{4}" onclick="{6}" onmouseover="this.style.color=\'#FFF\'" onmouseout="this.style.color=\'#304290\'" value="{5}" />'.Format(this.background, this.width, this.height, this.lower, this.upper, this.value, this.action);
			}
		},
	SpaceKey :
		function(){
			this.Super = SoftKeyboard.Key;
			this.Super();
			this.width = 80;
			this.lower = -1;
			this.upper = -1;
			this.value = "Space";
		},
	ShiftKey :
		function(){
			this.Super = SoftKeyboard.Key;
			this.Super();
			this.width = 46;
			this.value = "Shift"
			this.action = "SoftKeyboard.doShift()";
		},
	BackSpaceKey :
		function(){
			this.Super = SoftKeyboard.Key;
			this.Super();
			this.width = 85;
			this.value = "BackSpace";
			this.action = "SoftKeyboard.doBackSpace()";
		},
	EnterKey :
		function(){
			this.Super = SoftKeyboard.Key;
			this.Super();
			this.width = 47;
			this.value = "Enter"
			this.action = "SoftKeyboard.doEnter";
		},

//region Event Handler
	sendKey :
		function(keyObj){
			SoftKeyboard.setCaptureValue(String.fromCharCode(keyObj.getAttribute(SoftKeyboard.capsLock ? "upper" : "lower") * 1 + 33));
		},
	doBackSpace :
		function(){
			with(SoftKeyboard.curCapture){
				if(document.all){
					focus();
					var rng = document.selection.createRange();
					if(rng.text.length == 0) rng.moveStart("character", -1);
					rng.text = "";
				} else {
					var iStart = selectionStart;
					var iLen = selectionEnd - iStart;
					if(iLen > 0){
						SoftKeyboard.setCaptureValue("");
						setSelectionRange(iStart, iStart); 
					} else {
						value = value.substring(0, iStart-1) + value.substr(selectionEnd); 
						setSelectionRange(iStart - 1, iStart - 1); 
					}
					focus();
				}
			}
		},
	doShift :
		function(){
			SoftKeyboard.capsLock = ! SoftKeyboard.capsLock;
			var keyAtt = "lower";
			if(SoftKeyboard.capsLock)  keyAtt = "upper";
			var obj = SoftKeyboard.Container().childNodes;
			for(var i=0, j=0; j<47; i++){
				if(obj[i].tagName == "INPUT"){
					obj[i].value = String.fromCharCode(parseInt(obj[i].getAttribute(keyAtt)) + 33);
					j++;
				}
			}
		},
	doEnter :
		function(){
		},
	setCaptureValue :
		function(val){
			with(SoftKeyboard.curCapture){
			   if (document.all) {focus(); 
					var oRange = createTextRange(); 
					if(getAttribute("curPos")) getAttribute("curPos").text = val;
					else {	value += val;oRange.moveEnd("character", 1);}
			   } else { 
					var iStart = selectionStart;
					value = value.substring(0, iStart) + val + value.substring(selectionEnd, value.length); 
					setSelectionRange(iStart + 1, iStart + 1); 
			   } 
			   focus(); 
		   }
		},

//region Other...
	Container :
		function(){
			var _container = document.getElementById("__softKey");
			if(!_container){
				_container = document.createElement("DIV");
				_container.id = "__softKey";
				_container.style.cssText = "position:absolute;display:none;width:273px;height:161px;background:url({0}) no-repeat;padding:5px 0 0 5px;text-align:left".Format(SoftKeyboard.background);
				document.body.appendChild(_container);
			}
			return _container;
		},
	ActiveText :
		function() {
			if(document.all) SoftKeyboard.curCapture.curPos = document.selection.createRange().duplicate();
		},
	toString : function(){return ["Soft Keyboard v1.0", "author:我佛山人", "email:wfsr@msn.com", "version:1.0"].join("\n");}
}

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

演示：
wfsr.net/Plus/SoftKeyboard/Keyboard.htm

≡≡≡≡≡ 评论(共条)我要评论

+------------------------------------------------------------------------------------------------------+