<!DOCTYPE HTML>
<html>

<head>
	<title>H5密码控件Demo</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1,width=device-width, maximum-scale=1, minimum-scale=1, user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta content="yes" name="apple-touch-fullscreen">
	<meta name="App-Config" content="fullscreen=yes,useHistoryState=yes,transition=yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="format-detection" content="telephone=no,email=no">
	<link rel="stylesheet" type="text/css" href="./css/microdone-h5.css">
	<link rel="stylesheet" type="text/css" href="./css/unionPassword.css">
	<script type="text/javascript" src="./js/jquery-2.1.4.min.js"></script>
	<script type="text/javascript" src="./js/demo.js"></script>
	<script type="text/javascript" src="./js/microdoneH5.js"></script>
	<script type="text/javascript">
		var kb = new keyBoard({
			"chaosMode": 0, // 混乱模式,0:无混乱;1:打开时乱一次;2:每输入一个字符乱一次,默认值0
			"pressStatus": 1, // 按键状态,0:按下、抬起按键无变化;1:按下、抬起按键的颜色变化,默认值0
			"kbType": 1, // 键盘类型,0:全键盘;1:纯数字键盘,默认值0
			"svg": "svg",//svg图片的地址
			"hasMap": "0",//是否调用mapping值：当为1时调用，当为非1时，不调用
			"license": "b0JWK1NCeDRORVRCTFgvY3lzZWhZcEtWV0hYVlBtQ1IwOW5JVTBtUHFKMlNVODdTWGFRTWZqT04rY2JORkllZmVOekRsZHR6bE1CQkVGenhNUi80elhJelJGZHJLanY5R2JtN3N3M2ZLeE1QVVlzdG5vaFJuN1F6emhkVnVENjhIZmFGT3phdHJRdGJuMUd4ZG4rZUpHcGtJZ0ZWaFZhcVlTSnNZUDRmejZvPXsiaWQiOjAsInR5cGUiOiJ0ZXN0IiwicGxhdGZvcm0iOjEwLCJub3RiZWZvcmUiOiIyMDIwMTExNiIsIm5vdGFmdGVyIjoiMjAyMTAyMTYifQ=="
		});
		//设置映射数组,此处为了方便demo演示，写死了，正常应该由
		//服务器端下发映射数组
		passGuard.mapArr = "Wyc0MycsICc1NycsICc3MScsICcxMjEnLCAnMTI2JywgJzEyNCcsICc5MCcsICcxMTInLCAnODknLCAnOTMnLCAnMTA1JywgJzgxJywgJzExMycsICcxMjUnLCAnNjgnLCAnMzgnLCAnODUnLCAnNjUnLCAnMTE4JywgJzgwJywgJzg3JywgJzkxJywgJzQ0JywgJzMzJywgJzc4JywgJzg4JywgJzk2JywgJzEwOScsICc2MScsICc2NicsICc0MCcsICc4MicsICc3MicsICcxMjAnLCAnOTUnLCAnMTEwJywgJzQ2JywgJzg2JywgJzEwNycsICc1MCcsICc3MCcsICc5OCcsICcxMTcnLCAnMzYnLCAnMTAxJywgJzgzJywgJzQ4JywgJzExNCcsICc2NycsICc3NycsICcxMDgnLCAnMTAwJywgJzM1JywgJzczJywgJzY5JywgJzk5JywgJzEwMicsICc3NicsICc3NScsICcxMDQnLCAnNDknLCAnOTInLCAnNjInLCAnNTgnLCAnNTMnLCAnNzknLCAnOTcnLCAnNDUnLCAnNDEnLCAnMTE5JywgJzEyMycsICc1MScsICc2MycsICc0NycsICcxMDYnLCAnMzknLCAnMTExJywgJzExNScsICczNCcsICc5NCcsICcxMjInLCAnNjQnLCAnNTknLCAnMTE2JywgJzM3JywgJzc0JywgJzU1JywgJzYwJywgJzU0JywgJzUyJywgJzQyJywgJzg0JywgJzEwMycsICc1Nidd";
		var passGuard1 = new passGuard(
			{
				"jump": 1, //是否用添加删除回调：1代表使用，0代表不使用(可用于6个格子)
				"add": tianjia, //输入框值添加回调,当jump为1时，才有回调
				"del": jianshao, //输入框值减少回调,当jump为1时，才有回调
				//"mappurl" : "./send_mapping.jsp",//此处为了前端演示而屏蔽了，正常开发中需要此参数，该地址由后台人员提供
				"fixed": "H5fixed",//当fixed接口添加时，代表该输入框在fixed覆盖层上且覆盖层的ID为接口的值(在demo中覆盖层ID为"H5fixed")
				"maxLength": 6, // 最大输入长度
				"regExp1": "[\\S\\s]", // 输入过程限制的正则
				"regExp2": "[\\S\\s]{1,6}",
				"displayMode": 0, // 显示形式,0:星号;1:明文,默认值0
				"callBack": cb1, //成功回调
				"errorCallBack": cb2, //失败回调
				"focus": inputFocus1,//H5键盘获取焦点回调
				"blur": inputBlur1,//H5键盘失去焦点回调
				"rsaPublicKey": "30818902818100ac7916eeb5cc45b22e8a20ebb2cb11ac6b76678564300b70c3f09f8c0cb92076499556c2d60fa02a78d2d3d94a559ee5f65f5f89a94da88e5cade3bf6a412e4832d7380958fee0c9fe959a1e4c45c8c037a04f693210bb76fa0a3a9dbf3bee803e1365572b03848a7aa2e547257e5a8461073fd15b68b381f5bd76ec7fbc4d230203010001" // rsa公钥
			});
		function cb1() {
			console.log("passGuard1输入的密码匹配regExp2");
		}
		function cb2() {
			console.log("passGuard1输入的密码不匹配regExp2");
		}
		function inputFocus1() {
			console.log("passGuard1输入框获得焦点");
			kb.show()
		}
		function inputBlur1() {
			console.log("passGuard1输入框失去焦点???");
			// kb.hide();
		}
		//添加
		function tianjia(xh) {
        //xh为密码的长度
        console.log('xh: ', xh);
        var list = $('.password-div ul li'); //定义list是li
        $(list).eq(xh - 1).append($("<p class='yuan'></p>"));
        if (xh == 6) {
          	kb.hide();
          	//添加到第6为时去提交
		  	// alert('触发提交')
        	//   submit();
			postMessage('submit')
        }
      }

      //减少
      function jianshao(xh) {
        //xh为密码的长度
        console.log('xh: ', xh);
        var list = $('.password-div ul li'); //定义list是li
        $(list).eq(xh).html('');
      }

		// 
		function isFocus () {
			console.log('kb????',kb);
			console.log('kb1????',kb1);
			console.log('_$("kb1")????',_$("kb1"));
			console.log('passGuard1????',passGuard1);
			// this.kbShow();
			_$("kb1").focus();
			// kb1.focus();
			// alert('dianjile')
			// kb.show()
		};
	</script>
</head>

<body>
	<div class="container">
		<span style="padding-top: 20px; font-weight: bold; font-size: 16px">请输入支付密码，以验证身份。</span>
		<div class="password-div">
			<label for="password" class="password-lable">
				<ul onclick="isFocus()">
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
				</ul>
				<input type="text" readonly="readonly" id="kb1" name="password" placeholder="请输入密码"
					class="default NoneInput90" maxlength="6" tabindex="3" />
				<script>
					//初始化密码卫士,绑定键盘对象。数字参数：0代表全键盘，1代表数字键盘
					passGuard1.generate('kb1', kb, 'passGuard1', 1);
				</script>
			</label>
		</div>
		<div id="output11">默认1</div>
	</div>
	<script type="text/javascript">
		let globalData = null;
		let randKey = '';
		let countdown = null; // 用来保存倒计时的 interval ID
		window.onload = function () {
			Le = $(".default").length;
			for (var i = 1; i <= Le; i++) {
				$("#kb" + i).val("");
			};
			setTimeout(function () {
				kb.generate();
				Show = 0;
			}, 100);
		};
		// 监听获取 父级react native 传过来的数据
		window.addEventListener("message", (event) => {
			// 正确获取传递的数据
			let receivedDataStr = event.data;
			let receivedData = JSON.parse(receivedDataStr);
			randKey = receivedData.randKey;
			// 将接收到的数据展示在页面上
			document.getElementById('output11').innerText = "Received Data: " + receivedData.randKey;
			passGuard1.setRandKey(receivedData.randKey);
		});
		// 触发通讯 向react native传递
		function postMessage(eventType='',data={}) {
			var miwen = passGuard1.getOutput();
			var postData = null;
			var postDataStr = '';
			console.log('eventType????',eventType);
			console.log('miwen????',miwen);
			console.log('randKey?????',randKey);
			// if (window.ReactNativeWebView) {
				switch (eventType) {
					case 'submit':
						alert('submitNew22???');
						postData = {eventType,miwen,randKey};
						postDataStr = JSON.stringify(postData)
						console.log('postData?????',postData);
						console.log('postDataStr?????',postDataStr);
						
						window.ReactNativeWebView.postMessage(postDataStr);
					break;
				
					default:
						break;
				}
			// } else {
			// 	alert('无法与React Native通信');
			// }
		};
	</script>
</body>

</html>