Demo測試代碼html版
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<textarea id='testInput' cols='100' rows='5' ></textarea>
<script>
/*
var letter1='qwertyuiop[]';
var letter2='asdfghjkl;%';
var letter3='zxcvbnm,.@?';
var isShift=false;
var isCapsLock=false;
var isCtrl=false;
var isAlt=false;
*/
var baseBlockWidth=25;
var baseBlockHeight=25;
var baseBlockEvt='';
var baseTop=5;
var baseLeft=5;
var pa='absolute';
var pr='relative';
var keyBackGroundColor='#6C0';
function g(obj){
return document.getElementById(obj);
}
//---------------------
function cKeyboardDiv(){
var tdiv=document.createElement("div");
tdiv.id='divKeyBorad0';
tdiv.style.border="1px solid black";
tdiv.style.width="700px";
tdiv.style.height="300px";
tdiv.style.position=pa;
tdiv.style.top='100px';
tdiv.style.left='10px';
tdiv.style.backgroundColor="#ccc";
document.body.appendChild(tdiv);
}
function cb(objId,inTop,inLeft,inWidth,cbValue,inColor,inM){
tdiv=document.createElement("div");
tdiv.id=objId;
if(inM)
tdiv.style.border="2px solid white";
tdiv.style.width=inWidth+'px';
tdiv.style.height=baseBlockHeight+'px';
tdiv.style.position=pa;
tdiv.style.top=inTop+'px';
tdiv.style.left=inLeft+'px';
tdiv.innerHTML=' '+cbValue;
tdiv.style.backgroundColor=inColor;
tdiv.onclick=function p(){processKeyEvt(objId);};
g('divKeyBorad0').appendChild(tdiv);
}
function cbL(objId,inTop,inLeft,incbValue){
cb(objId,inTop,inLeft,baseBlockWidth,'','#66f',false);
cb(objId+'_',inTop+baseBlockHeight,inLeft,baseBlockWidth*2,incbValue,'#66f',false);
}
function cbM(objId,inTop,inLeft,incbValue){
cb(objId,inTop,inLeft,baseBlockWidth*2,incbValue,'#6c6',true);
}
function cbR(objId,inTop,inLeft,incbValue){
cb(objId,inTop,inLeft+baseBlockWidth,baseBlockWidth,'','#f60',false);
cb(objId+'_',inTop+baseBlockHeight,inLeft,baseBlockWidth*2,incbValue,'#f60',false);
}
function processKeyEvt(obj){
//changeKeyColor
//alert(obj)
var str=obj;
if(str.charAt(str.length-1)=='_'){
str=str.substring(0,str.length-1);
}
g('testInput').value=g('testInput').value+str.charAt(str.length-1);
}
cKeyboardDiv();
cbL('vtq',0,0,'Q');
cbM('vtw',0,25,' W');
cbR('vte',0,50,' E');
cbL('vtr',0,100,'R');
cbM('vtt',0,125,' T');
cbR('vty',0,150,' Y');
cbL('vtu',0,200,'U');
cbM('vti',0,225,' I');
cbR('vto',0,250,' O');
</script>
</body>
</html>