css+javascript 写的HTML5 微信端输入支付密码键盘

Posted 2020-08-18 wangwht

微信端没有纯数字键盘，用html5写了一个模仿ios输入支付密码键盘效果

keyboard.js

var _keyboard = {};

	$(document).ready(function(){
		_keyboard.bindKey();
		_keyboard.close(); 
	});
	_keyboard.num = 0;
	/**
	 * 给键盘绑定事件
	 */
	_keyboard.bindKey=function(){
		$("#keyId").on("tap","li",function(){
			var jthat = $(this);
			var numVal = jthat.attr("val");
			var inputVal = $("#contentId").val();
			
			if(numVal == -1){ //删除数值
				_keyboard.delChar();
				
			}else{ //添加数值
				_keyboard.addChar(numVal);
			}
			
		});
	}
	
	/**
	 * 添加字符
	 * @param {Object} numVal   	按键的num
	 * @param {Object} inputVal		input内容
	 */
	_keyboard.addChar=function(numVal){
	//	console.log(numVal);
		if(numVal == "."){
			return ;
		}
		if($("#contentId").find("input").eq(5).val() == ""){	
			$("#contentId").find("input").eq(_keyboard.num).val(numVal);
		}	
		if(_keyboard.num < 5){
			_keyboard.num++;
		}
		
	}
	_keyboard.close = function(){
		$("#keyboardClose").on("click",function(){
			$("#contentId").hide(); 
			$("#_Wdafy_keyboard").hide(); 
			$("#keyboardbackground").hide();
		});
	}
	/**
	 * 删除字符
	 * @param {Object} inputVal  当前input的val
	 */
	_keyboard.delChar=function(){	
		$("#contentId").find("input").eq(_keyboard.num).val("");
		if(_keyboard.num == 0){return }
		_keyboard.num--;
		
	}
	

　　keyboard.htm

 <div id="contentId"  class="_Wdafy_faInput" style="display: block;">
    	<div id="keyboardClose" class="close">
    		
    		<img src="img/regClose_Hover.png" />
    		
    	</div>
    	<div class="zfpassword">请输入支付密码</div>
    	<input type="password" readonly="readonly" />
    	<input type="password" readonly="readonly"  />
    	<input type="password" readonly="readonly" />
    	<input type="password" readonly="readonly" />
    	<input type="password" readonly="readonly" />
    	<input type="password" readonly="readonly" />
		<!--<img class="guangbiao" src="img/guangbiao.gif" id="cursorId"/>-->
		<!--<input type="text" id="contentId" readonly="readonly" maxlength="20" value=""/>-->
    </div>
  
  
  <div id="keyboardbackground" class="keyboardbackground"></div>
  
  
  
   <div id="_Wdafy_keyboard" class="_Wdafy_keyboard" style="display: block;">

	<ul id="keyId">
		<li val="1">1</li>
		<li val="2">2</li>
		<li val="3">3</li>
		<li val="4">4</li>
		<li val="5">5</li>
		<li val="6">6</li>
		<li val="7">7</li>
		<li val="8">8</li>
		<li val="9">9</li>
		<li val="."></li>
		<li val="0">0</li>
		<li val="-1">x</li>
	</ul> 	
   </div>    

　　keyboard.css

   body,html {
    	height: 100%;
    }
	*{
		padding: 0;
		margin: 0;
	}    	

	._Wdafy_faInput input {
		width: 6.2rem; height: 1.4rem; font-size: 0.5rem;  line-height: 1.4rem;
	}
	._Wdafy_faInput .guangbiao {
		position: absolute;
		left: 10px;
		top:0.34rem;
	}
	._Wdafy_faInput .guangbiao img {
		width: 0.01rem;
	}
	._Wdafy_keyboard {
		width: 7.5rem;
		position: absolute;
		bottom: 0;
	}
	._Wdafy_keyboard li {
		width: 2.5rem;
		height: 1rem;
		border: 1px solid #BFBFBF;
		font-size: 0.6rem;
		background: #F5F5F5;
		float: left;
		line-height: 1rem;
		text-align: center;
		box-sizing: border-box;
	}
	._Wdafy_TopBackground {
		width: 7.5rem;
		text-align: center;
		line-height: 0.9rem;
		background: #F5F5F5;
		height: 0.9rem;
	}
	._Wdafy_faInput { 
		position: relative; z-index: 100; text-align: center;
		background: #FFF;  position: absolute; top: 2rem; margin: 0 auto; width: 6rem; 
		padding: 0.6rem 0 0.7rem 0;
		border-radius: 0.3rem;
		left: 0;
		right: 0;
		margin: 0 auto;
	}
	._Wdafy_faInput input {
		width: 0.74rem;
		height: 0.74rem;
		background: #FFF;
		border: 1px solid #ccc;
		text-align: center;
		margin-left: 0.2rem;
		line-height: 0.5rem;
		float: left;
		display: block;
		
	}
	.keyboardbackground {
		width: 7.5rem;
		height: 100%;
		background: #000;
		opacity: 0.7;
		position: fixed;
	}
	.zfpassword {
		font-size: 0.3rem;
		margin-bottom: 0.2rem;
	}
	._Wdafy_faInput .close {
		position: absolute;
		top: 0rem;
		right: 0rem;
		z-index: 99999;
		
	}
	._Wdafy_faInput .close img {
		width: 0.78rem;
		height: 0.88rem;
	}