虚拟输入键盘的JavaScript实现-优快云博客

最近在做一个触摸屏的项目需要用到一个虚拟的输入键盘着手写了一个不吝赐教

js代码

<script type="text/javascript">

	
	//身份证追加
	function addCard(numval){
			var num=$('#cards').val();
			var index=$("#index").val();
			alert(index);
			if(index!='' && index!=0){
				num=(num.substr(0,index))+numval+(num.substr(index,num.length));
				++index;
				$("#index").val(index);		
			}else{
				num=num+numval;
			}
			
			if(num.length<19){
			$('#cards').val(num);
			}
		}
	
	//去掉身份证不正确的值
	function backspace(){
		var num=$('#cards').val();
		if(num!=''){
			var index=$("#index").val();
			num=num.substr(0,index-1)+num.substr(index,num.length);
			$('#cards').val(num);
			$("#index").val(index!=0?index-1:index);	
		}
		
		}


	// 获取光标在文本框的位置
	function _getFocus(elem) {
			var index = 0;
		if (document.selection) {// IE Support
			elem.focus();
			var Sel = document.selection.createRange();
			if (elem.nodeName === 'text') {//textarea
				var Sel2 = Sel.duplicate();
				Sel2.moveToElementText(elem);
				var index = -1;
				while (Sel2.inRange(Sel)) {
					Sel2.moveStart('character');
					index++;
				};
			}else if (elem.nodeName === 'INPUT') {// input
				Sel.moveStart('character', -elem.value.length);
				index = Sel.text.length;
			}
		}else if (elem.selectionStart || elem.selectionStart == '0') { // Firefox support
			index = elem.selectionStart;
		}
			//alert(index);
			//return (index);
			$("#index").val(index);
	}
	
</script>

css

<style type="text/css">

	.middletop_inputText{ width:1160px; height:250px; margin-top:30px;font-family:"微软雅黑", "宋体"; font-size:25px; color:#FFFF00;}
	 
	  .middletop-center{ width:1160px; height:250px; text-align:center; margin-top:40px;}
	   .middlecenteru1{ width:337px; height:281px; }
	  .middlexia_inputText{ width:1160px; min-height:200px; margin-top:5px;}
	  .dev_text{ width:1160px; min-height:100px; margin-top:5px;}
	  .dev_textInput{border:1px solid white;width: 800px; min-height: 45px;margin-top: 45px;float: left;}
	   .dev_textInputs{width: 260px; height: 45px;margin-top: 45px;float: right;}
	   .dev_textFrist{width: 270px; height: 45px;margin-top: 55px;float: left;}
       .middlexiatu1{
	    height:281px; width:337px;border:1px solid red;
	   margin-left:7px;
	   }
	  
	   .spanCard_inputText{ font-family:"微软雅黑", "宋体"; font-size:20px; color: white;}
	   
	   img{position:relative;}
	   
	   	.keyCenter{
		border:1px solid white;
		min-height:135px;
		width:820px;
		margin-top: 5px;
		margin-left: 7px;
		/*background: white;*/}
		

		

	.card_text{
		height:35px;
		width:390px;
		float:left;
		font-size: 24px;
		
		margin-top:4px;
		/*font-family:"微软雅黑", "宋体"; font-size:24px; color:#000;*/
		
		}
		
	.card_center{
		min-height:260px;
		width:399px;
		float:left;
		font-size: 24px;
		margin-left: 45px;
		/*font-family:"微软雅黑", "宋体"; font-size:24px; color:#000;*/
	
		}
		
	.key{
		min-height:250px;
		width:340px;
		float:right;
		font-size: 24px;
		
		
	}
	.keys{
		height:60px;
		width:300px;
		font-size: 24px;
		margin-left:15px;
		margin-top:4px;
		
	}
	.keyImg{

		 float:right;
		 margin-top:10px;
		 margin-right:2px;
		 cursor:pointer;
		}
		
		
		
	.centerKey{
		border:1px solid white;
		height:135px;
		width:600px;
		margin-top:2px;
		display:none;
		
		margin-left: 7px;
		background: white;margin-bottom: 5px;}
		
		.topKey{
  
			margin-top:5px;
			height:60px;
			width:300px;
			margin-left:130px;}
		
		.buttomKey{
           
			margin-top:5px;
			height:60px;
			width:595px;
			
		}
		
		.keyValue{
		height:60px;
		width:60px;
		float:right;
		margin-right:30px;}
	   
</style>

html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title></title>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>


<link rel="stylesheet" href="../css/public.css" type="text/css"></link>


</head>

<body>

 
 <div class="bgmain">
 
   
   <input type="hidden"  id="index"/>
   
   <div class="middle">
	   <div class="middle-center">
  
	   <div class="middlexia_inputText">

			
			<div class="dev_text">
			
			<div class="dev_textFrist"><span style="color:red;font-size:25px;margin-top: 10px;"><strong>您的身份证号是：</strong></span></div>
			<div class="dev_textInput">
				<div class="card_center">
					<input type="text" class='card_text' id="cards" οnfοcus="_getFocus(this)"/>
				</div>
			
				 <div class="key">
				 
					<div class="keys">
						<div class="keyValue" οnclick="addCard('3')"><img  src="keyImg/3.png"/></div>
						<div class="keyValue" οnclick="addCard('2')"><img  src="keyImg/2.png"/></div>
						<div class="keyValue" οnclick="addCard('1')"><img  src="keyImg/1.png"/></div>
					</div>
				 
					<div class="keys">
						<div class="keyValue" οnclick="addCard('6')"><img  src="keyImg/6.png"/></div>
						 <div class="keyValue" οnclick="addCard('5')"><img  src="keyImg/5.png"/></div>
						<div class="keyValue" οnclick="addCard('4')"><img  src="keyImg/4.png"/></div>
					</div>
				
				<div class="keys">
					<div class="keyValue" οnclick="addCard('9')"><img  src="keyImg/9.png"/></div>
					<div class="keyValue" οnclick="addCard('8')"><img  src="keyImg/8.png"/></div>
					<div class="keyValue" οnclick="addCard('7')"><img  src="keyImg/7.png"/></div>
				 </div>
				 
				 <div class="keys">
					 <div class="keyValue"  οnclick="backspace()"><img  src="keyImg/12.png" /></div>
					 <div class="keyValue" οnclick="addCard('0')"><img  src="keyImg/0.png"/></div>
					<div class="keyValue" οnclick="addCard('x')"><img  src="keyImg/10.png"/></div>
				 </div>
			</div>		
			</div>
			</div>
	   </div>
	</div>
	
   </div>    
       
</div>
</body>
</html>

js键盘