BF-更新前端

yn-bftl-byx / thirdparty

Browse code BF-更新前端 master
1 parent 33d9cb2 commit 1ec001b17f03d949e98f60d8d22a615db7c8e8da huishen authored on 12 Oct

Patch

Showing 2 changed files

Ignore Space Show notes View src/main/resources/templates/unionPassword.html
<!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> <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; // 将接收到的数据展示在页面上 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> <!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">默认2</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>

Ignore Space Show notes View

src/main/resources/templates/unionPassword.html

<!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>
	<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;
			// 将接收到的数据展示在页面上
			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>

<!DOCTYPE HTML>
<html>

<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>
	<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>

Ignore Space Show notes View src/main/resources/templates/withdrawPassword.html
<!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">请输入支付密码。3</span> <span style="padding-top: 10px; font-weight: bold; font-size: 14px">提现</span> <div> <span style="font-weight: bold; font-size: 14px">￥</span> <span id="amount" style="font-weight: bold; font-size: 25px"></span> </div> <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> <script type="text/javascript"> let globalData = null; let randKey = ''; let amount = 0; 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); document.getElementById('amount').innerText = 0; }; // 监听获取父级react native 传过来的数据 window.addEventListener("message", (event) => { // 正确获取传递的数据 let receivedDataStr = event.data; let receivedData = JSON.parse(receivedDataStr); randKey = receivedData.randKey; amount = receivedData.amount; // 将接收到的数据展示在页面上 document.getElementById('amount').innerText = "金额: " + (receivedData.amount\|\|0); 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> <!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> <span style="padding-top: 10px; font-weight: bold; font-size: 14px">提现</span> <div> <span style="font-weight: bold; font-size: 14px">￥</span> <span id="amount" style="font-weight: bold; font-size: 25px"></span> </div> <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">默认3</div> </div> <script type="text/javascript"> let globalData = null; let randKey = ''; let amount = 0; 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); document.getElementById('amount').innerText = 0; }; // 监听获取父级react native 传过来的数据 window.addEventListener("message", (event) => { // 正确获取传递的数据 let receivedDataStr = event.data; let receivedData = JSON.parse(receivedDataStr); randKey = receivedData.randKey; amount = receivedData.amount; // 将接收到的数据展示在页面上 document.getElementById('output11').innerText = "Received Data: " + receivedData.randKey; document.getElementById('amount').innerText = "金额: " + (receivedData.amount\|\|0); 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>

Ignore Space Show notes View

src/main/resources/templates/withdrawPassword.html

<!DOCTYPE HTML>
<html>

<body>
	<div class="container">
		<span style="padding-top: 20px; font-weight: bold; font-size: 16px">请输入支付密码。3</span>
		<span style="padding-top: 10px; font-weight: bold; font-size: 14px">提现</span>
		<div>
			<span style="font-weight: bold; font-size: 14px">￥</span>
			<span id="amount" style="font-weight: bold; font-size: 25px"></span>
		</div>
		<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>
	<script type="text/javascript">
		let globalData = null;
		let randKey = '';
		let amount = 0;
		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);
			document.getElementById('amount').innerText = 0;
		};
		// 监听获取 父级react native 传过来的数据
		window.addEventListener("message", (event) => {
			// 正确获取传递的数据
			let receivedDataStr = event.data;
			let receivedData = JSON.parse(receivedDataStr);
			randKey = receivedData.randKey;
			amount = receivedData.amount;
			// 将接收到的数据展示在页面上
			document.getElementById('amount').innerText = "金额: " + (receivedData.amount||0);
			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>

<!DOCTYPE HTML>
<html>

<body>
	<div class="container">
		<span style="padding-top: 20px; font-weight: bold; font-size: 16px">请输入支付密码。</span>
		<span style="padding-top: 10px; font-weight: bold; font-size: 14px">提现</span>
		<div>
			<span style="font-weight: bold; font-size: 14px">￥</span>
			<span id="amount" style="font-weight: bold; font-size: 25px"></span>
		</div>
		<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">默认3</div>
	</div>
	<script type="text/javascript">
		let globalData = null;
		let randKey = '';
		let amount = 0;
		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);
			document.getElementById('amount').innerText = 0;
		};
		// 监听获取 父级react native 传过来的数据
		window.addEventListener("message", (event) => {
			// 正确获取传递的数据
			let receivedDataStr = event.data;
			let receivedData = JSON.parse(receivedDataStr);
			randKey = receivedData.randKey;
			amount = receivedData.amount;
			// 将接收到的数据展示在页面上
			document.getElementById('output11').innerText = "Received Data: " + receivedData.randKey;
			document.getElementById('amount').innerText = "金额: " + (receivedData.amount||0);
			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>

Show line notes below