`
一纸红颜岂值倾尽天下
  • 浏览: 28008 次
  • 性别: Icon_minigender_1
社区版块
存档分类
最新评论

js键盘

    博客分类：
  • js
jsjavascriptjquery
阅读更多

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

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" onfocus="_getFocus(this)"/>
				</div>
			
				 <div class="key">
				 
					<div class="keys">
						<div class="keyValue" onclick="addCard('3')"><img  src="keyImg/3.png"/></div>
						<div class="keyValue" onclick="addCard('2')"><img  src="keyImg/2.png"/></div>
						<div class="keyValue" onclick="addCard('1')"><img  src="keyImg/1.png"/></div>
					</div>
				 
					<div class="keys">
						<div class="keyValue" onclick="addCard('6')"><img  src="keyImg/6.png"/></div>
						 <div class="keyValue" onclick="addCard('5')"><img  src="keyImg/5.png"/></div>
						<div class="keyValue" onclick="addCard('4')"><img  src="keyImg/4.png"/></div>
					</div>
				
				<div class="keys">
					<div class="keyValue" onclick="addCard('9')"><img  src="keyImg/9.png"/></div>
					<div class="keyValue" onclick="addCard('8')"><img  src="keyImg/8.png"/></div>
					<div class="keyValue" onclick="addCard('7')"><img  src="keyImg/7.png"/></div>
				 </div>
				 
				 <div class="keys">
					 <div class="keyValue"  onclick="backspace()"><img  src="keyImg/12.png" /></div>
					 <div class="keyValue" onclick="addCard('0')"><img  src="keyImg/0.png"/></div>
					<div class="keyValue" onclick="addCard('x')"><img  src="keyImg/10.png"/></div>
				 </div>
			</div>		
			</div>
			</div>
	   </div>
	</div>
	
   </div>    
       
</div>
</body>
</html>
 
0
顶
0
踩
分享到：
| Runtime 打开浏览器
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics