触屏键盘用户体验设计vsk

最新推荐文章于 2020-09-17 21:35:58 发布

vsked

最新推荐文章于 2020-09-17 21:35:58 发布

阅读量513

点赞数

分类专栏： ios windows8 touch wp8 windows7

本文链接：https://blog.csdn.net/chousheng/article/details/8000948

版权

ios 同时被 3 个专栏收录

4 篇文章 0 订阅

订阅专栏

windows8

3 篇文章 0 订阅

订阅专栏

wp8

3 篇文章 0 订阅

订阅专栏

vsked@163.com

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.οnclick=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>

vsked

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
触屏键盘用户体验设计vsk

[email protected]测试代码html版 /* var letter1='qwertyuiop[]'; var letter2='asdfghjkl;%'; var letter3='zxcvbnm,.@?'; var isShift=false; var isCapsLock=false; var isCtrl=
复制链接

扫一扫