devbox
神奇cpp
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

自动输入6位密码 或数字 无光标_自动输入六位数密码

作者：神奇cpp | 2024-06-26 13:07:41

赞

踩

自动输入六位数密码


自动输入6位数字
试过好几种方法手机或ie8都有光标，下面这个没有光标，适用于pc与手机

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="UTF-8">
  5. 		<title></title>
  6. 		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  7. 		
  8. 		<style>
  9. 			*{
  10. 				margin:0px;
  11. 				padding:0px;
  12. 			}
  13. 			.pwd-box {
  14. 				padding: 0 58px;
  15. 			    /* width: 100%; */
  16. 			    position: relative;
  17. 			    border-radius: 14px;
  18. 			    overflow: hidden;
  19. 			     background-color: ghostwhite; 
  20. 			    /* border: 1px solid #ffffff; */
  21. 			}
  22. 			.fake-box p{
  23. 				float: left;
  24. 				display: block;
  25.                 width: 15%;
  26. 				height: 107px;
  27. 				line-height: 107px;
  28. 				border: 2px solid #eee;
  29. 				border-radius:10px;
  30. 				text-align: center;
  31. 				font-size: 60px;
  32. 				background-color: #fff;
  33. 			}
  34. 			.pwd-input{
  35. 				position:absolute;
  36. 				left:0px;
  37. 				top:10px;
  38. 				/*top:-100px;*/
  39. 				width:100px;
  40. 				height:20px;
  41. 				z-index:20;
  42. 				opacity: 0;
  43. 				filter:alpha(opacity:0);
  44. 				/*background-color: gold;
  45. 				color: red;*/
  46. 			}
  47. 		</style>
  48. 	</head>
  49. 	<body>
  50. 		<div id="pwd-input" class="pwd-input" tabindex="0" contenteditable="true"></div>
  51. 		<div class="pwd-box">
  52. 			<div id="dv" class="fake-box">
  53. 				<p class="dvp1"></p>
  54. 				<p class="dvp2"></p>
  55. 				<p class="dvp3"></p>
  56. 				<p class="dvp4"></p>
  57. 				<p class="dvp5"></p>
  58. 				<p class="dvp6"></p>
  59. 			</div>
  60. 		</div>
  61. 		
  62. 		<button οnclick="cleanData()">清空</button>
  63. 		
  64. 		
  65. 		
  66. 		<script src="https://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
  67. 		<script type="text/javascript">
  68. 	  		
  69. 	  		
  70. 	  		//显示div->隐藏div获取焦点
  71. 	  		$("#dv").click(function(){
  72. 			 	$("#pwd-input").focus();
  73. 			 	
  74. 	  		});
  75. 	  		//隐藏div添加键盘事件
  76. 	  		$("#pwd-input").keydown(function(event){ 
  77. 		 		noNumbers(event);
  78. 		 	});
  79. 			 	
  80. 		 	
  81. 		 	var myNum = 0;//记录实际输入个数
  82. 	  		var myLen = 6;//目标输入个数
  83. 	  		//数字输入
  84. 		  	function noNumbers(e){
  85. 			    var keynum;//键盘值（数字48到57）
  86. 			    var keychar="";//键盘值对应的字符（数字0到9）
  87. 			    var ev = e || window.event;  
  88.               
  89. 			    keynum = window.event ? ev.keyCode : ev.which;
  90. 			    keychar = String.fromCharCode(keynum);
  91. 			    
  92. 			    //键盘值BackSpace
  93. 			    if(keynum == 8){
  94. 			    	//window.history.forward(1);//屏蔽浏览器自带的后退键  
  95. 			        /*if(window.event.srcElement.tagName.toUpperCase()!="INPUT" && window.event.srcElement.tagName.toUpperCase()!="TEXTAREA" && window.event.srcElement.tagName.toUpperCase()!="TEXT"){    
  96. 					    stopDefault(ev);
  97. 				    } */
  98. 				   
  99. 				    //阻止默认行为
  100. 				    stopDefault(ev);
  101. 				    
  102. 				    $(".pwd-input").html("");
  103. 				    //重新定义该键的作用
  104. 				    if(myNum > myLen) {myNum = myLen;}
  105. 			        $(".dvp"+myNum).html("");
  106. 			        if(myNum > 0){
  107. 			        	myNum--;
  108. 			        }
  109. 			        
  110. 			    	return;
  111. 			    	 
  112. 			    }
  113. 			    //console.log(keynum+':'+keychar);
  114. 			    
  115. 			    //只存数字
  116. 			    if(keynum<47 || keynum>58){
  117. 			    	return;
  118. 			    }else{
  119. 			    	if(myNum > myLen) return;
  120. 			    	
  121. 			    	myNum++;
  122. 			      	if(myNum <= myLen){
  123. 			      		console.log("当前输入：" + keychar);
  124. 				   	    $(".dvp"+myNum).html(keychar);
  125. 				   	    if (myNum == myLen) {
  126. 				   	     	var str = getInputStr();
  127. 				   	     	console.log("6位数字："+str);
  128. 				   	    }
  129. 			    	} 
  130. 			    
  131. 			    }
  132. 			        
  133. 			}
  134. 		  	
  135. 		  	//获取输入的内容
  136. 		  	function getInputStr() {
  137. 		  		var $input = $("#dv p");
  138. 		  		var pwd = "";
  139. 		  		$input.each(function(index,item) {  
  140.                     var value = item.innerText;
  141.                     pwd += value;
  142.                 });  
  143.                 return pwd;
  144. 		  	}
  145. 		  	
  146. 		  	//获取输入的内容
  147. 		  	function cleanData() {
  148. 		  		var $input = $("#dv p");
  149. 		  		$input.each(function(index,item) {  
  150.                     item.innerText = "";
  151.                 });  
  152.                 myNum = 0;
  153.                 $("#pwd-input").html('');
  154. 		  	}
  155. 		  	
  156. 		  	//阻止元素发生默认的行为
  157. 			function stopDefault(ev) { 
  158. 				ev.keyCode=0;//取消等于keyCode值的键的作用
  159. 				
  160. 		        if (ev.preventDefault) {  
  161. 		            //preventDefault()方法阻止元素发生默认的行为  
  162. 		            ev.preventDefault();  
  163. 		        }  
  164. 		        if (ev.returnValue) {  
  165. 		            //IE浏览器下用window.event.returnValue = false;实现阻止元素发生默认的行为  
  166. 		            ev.returnValue = false;  
  167. 		        }  
  168. 		        return false;  
  169. 		    } 
  170. 		  
  171. 		 	
  172.     	</script>
  173. 	</body>
  174. </html>



声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/神奇cpp/article/detail/759432
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号