BF异步生成密文

yn-bftl-byx / thirdparty

Browse code BF异步生成密文 master
1 parent 023cf4f commit 4a832377e8fa23936cb9ea96c0e80cb127a6d02f huishen authored on 25 Oct

Patch

Showing 2 changed files

Ignore Space Show notes View src/main/resources/templates/passGuard.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/passGuard.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({ //"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输入框获得焦点"); } function inputBlur1() { console.log("passGuard1输入框失去焦点"); } </script> </head> <body> <div style="background-color: #f2f2f2; height: 100%"> <div style=" margin: 20px; box-shadow: 0px 1px 16px 0px rgba(54, 54, 54, 0.13); border-radius: 14px; display: flex; flex-direction: column; justify-content: center; padding: 20px; background-color: #fff; " > <div style=" font-family: PingFang SC; font-weight: bold; color: #323232; margin-bottom: 20px; " > <span>重置信息</span> </div> <div class="basic-info-input"> <span class="relative"><sup class="required absolute"></sup>新支付密码</span> <input type="text" readonly="readonly" id="kb1" name="input3" placeholder="请输入密码" class="default NoneInput90" maxlength="50" tabindex="3" /> <script> //初始化密码卫士,绑定键盘对象。数字参数：0代表全键盘，1代表数字键盘 passGuard1.generate("kb1", kb, "passGuard1", 1); </script> </div> <span id="tips" style="display: none;font-size: 14;color: #666;margin-left: 5px;"></span> <div class="basic-info-input"> <span class="nowrap">验证码</span> <!-- <input type="text" id="kb2" readonly="readonly" name="input3" placeholder="请输入新密码" class="default NoneInput90" maxlength="50" tabindex="3"/> --> <input type="text" id="verifCode" onfocus="kb.hide();" class="de2 NoneInput90" maxlength="6" /> <!-- <script> //初始化密码卫士,绑定键盘对象。数字参数：0代表全键盘，1代表数字键盘 passGuard2.generate("kb2", kb, "passGuard2", 0); </script> --> <button class="nowrap blue no-border" id="sendCodeBtn" onclick="postMessage('getVerifCode')">获取验证码</button> </div> <div class="flex-row flex-align-center"> <img src="./svg/wenhao.svg" style="width: 14px" alt="" srcset=""> <span class="color666 font14 margin-left-5">验证码短信向绑定账户的手机号码发送</span> </div> </div> <div style="padding: 0 20px; margin-top: 25px"> <button style=" background: #ffffff; border: 1px solid #4a74ff; border-radius: 19px; padding: 10px; display: flex; justify-content: center; align-items: center; width: 100%; " onclick="postMessage('submit')" > <span style=" font-size: 15px; font-family: PingFang SC; font-weight: 500; color: #4a74ff; " >提交</span > </button> </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); // }); // 通过函数调用拿到父组件的数据 window.receiveData = function(data) { if (data.randKey) { randKey = data.randKey; passGuard1.setRandKey(randKey); postMessage('getKey') document.getElementById('tips').style.display = "block"; document.getElementById('tips').innerText = '随机因子'+data.randKey; } else { document.getElementById('tips').style.display = "block"; document.getElementById('tips').innerText = '随机因子没有传过来'; } }; // 验证码倒计时 function startCountdown() { const sendCodeBtn = document.getElementById('sendCodeBtn'); let seconds = 60; // 倒计时秒数 // 禁用按钮并开始倒计时 sendCodeBtn.disabled = true; sendCodeBtn.innerText = '重新发送 (' + seconds + ')'; countdown = setInterval(() => { seconds--; sendCodeBtn.innerText = '重新发送 (' + seconds + ')'; if (seconds <= 0) { clearInterval(countdown); // 清除倒计时 sendCodeBtn.disabled = false; sendCodeBtn.innerText = '获取验证码'; // 恢复按钮文字 } }, 1000); // 每秒更新一次 }; // 触发通讯向react native传递 function postMessage(eventType='',data={}) { var miwen = ''; var postData = null; var postDataStr = ''; if (window.ReactNativeWebView) { switch (eventType) { case 'getVerifCode': this.startCountdown(); postData = {eventType}; postDataStr = JSON.stringify(postData) window.ReactNativeWebView.postMessage(postDataStr); break; case 'getKey': postData = {eventType}; postDataStr = JSON.stringify(postData) window.ReactNativeWebView.postMessage(postDataStr); break; case 'submit': let verifCode = document.getElementById('verifCode').value; miwen=passGuard1.getOutput(); postData = {eventType,miwen,verifCode,randKey}; postDataStr = JSON.stringify(postData) window.ReactNativeWebView.postMessage(postDataStr); break; default: break; } } else { console.log('无法与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/passGuard.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({ //"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输入框获得焦点"); } function inputBlur1() { console.log("passGuard1输入框失去焦点"); } </script> </head> <body> <div style="background-color: #f2f2f2; height: 100%"> <div style=" margin: 20px; box-shadow: 0px 1px 16px 0px rgba(54, 54, 54, 0.13); border-radius: 14px; display: flex; flex-direction: column; justify-content: center; padding: 20px; background-color: #fff; " > <div style=" font-family: PingFang SC; font-weight: bold; color: #323232; margin-bottom: 20px; " > <span>重置信息</span> </div> <div class="basic-info-input"> <span class="relative"><sup class="required absolute"></sup>新支付密码</span> <input type="text" readonly="readonly" id="kb1" name="input3" placeholder="请输入密码" class="default NoneInput90" maxlength="50" tabindex="3" /> <script> //初始化密码卫士,绑定键盘对象。数字参数：0代表全键盘，1代表数字键盘 passGuard1.generate("kb1", kb, "passGuard1", 1); </script> </div> <span id="tips" style="display: none;font-size: 14;color: #666;margin-left: 5px;"></span> <div class="basic-info-input"> <span class="nowrap">验证码</span> <!-- <input type="text" id="kb2" readonly="readonly" name="input3" placeholder="请输入新密码" class="default NoneInput90" maxlength="50" tabindex="3"/> --> <input type="text" id="verifCode" onfocus="kb.hide();" class="de2 NoneInput90" maxlength="6" /> <!-- <script> //初始化密码卫士,绑定键盘对象。数字参数：0代表全键盘，1代表数字键盘 passGuard2.generate("kb2", kb, "passGuard2", 0); </script> --> <button class="nowrap blue no-border" id="sendCodeBtn" onclick="postMessage('getVerifCode')">获取验证码</button> </div> <div class="flex-row flex-align-center"> <img src="./svg/wenhao.svg" style="width: 14px" alt="" srcset=""> <span class="color666 font14 margin-left-5">验证码短信向绑定账户的手机号码发送</span> </div> </div> <div style="padding: 0 20px; margin-top: 25px"> <button style=" background: #ffffff; border: 1px solid #4a74ff; border-radius: 19px; padding: 10px; display: flex; justify-content: center; align-items: center; width: 100%; " onclick="postMessage('submit')" > <span style=" font-size: 15px; font-family: PingFang SC; font-weight: 500; color: #4a74ff; " >提交</span > </button> </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); // }); // 通过函数调用拿到父组件的数据 window.receiveData = function(data) { if (data.randKey) { randKey = data.randKey; passGuard1.setRandKey(randKey); postMessage('getKey') } else { document.getElementById('tips').style.display = "block"; document.getElementById('tips').innerText = '随机因子没有传过来'; } }; // 验证码倒计时 function startCountdown() { const sendCodeBtn = document.getElementById('sendCodeBtn'); let seconds = 60; // 倒计时秒数 // 禁用按钮并开始倒计时 sendCodeBtn.disabled = true; sendCodeBtn.innerText = '重新发送 (' + seconds + ')'; countdown = setInterval(() => { seconds--; sendCodeBtn.innerText = '重新发送 (' + seconds + ')'; if (seconds <= 0) { clearInterval(countdown); // 清除倒计时 sendCodeBtn.disabled = false; sendCodeBtn.innerText = '获取验证码'; // 恢复按钮文字 } }, 1000); // 每秒更新一次 }; // 触发通讯向react native传递 function postMessage(eventType='',data={}) { var miwen = passGuard1.getOutput(); var postData = null; var postDataStr = ''; if (window.ReactNativeWebView) { switch (eventType) { case 'getVerifCode': this.startCountdown(); postData = {eventType}; postDataStr = JSON.stringify(postData) window.ReactNativeWebView.postMessage(postDataStr); break; case 'getKey': postData = {eventType}; postDataStr = JSON.stringify(postData) window.ReactNativeWebView.postMessage(postDataStr); break; case 'submit': let verifCode = document.getElementById('verifCode').value; postData = {eventType,miwen,verifCode,randKey}; postDataStr = JSON.stringify(postData) window.ReactNativeWebView.postMessage(postDataStr); break; default: break; } } else { console.log('无法与React Native通信'); } }; </script> </body> </html>

Ignore Space Show notes View

src/main/resources/templates/passGuard.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/passGuard.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({
			//"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输入框获得焦点");
		}
		function inputBlur1() {
			console.log("passGuard1输入框失去焦点");
		}
	</script>
</head>

<body>
    <div style="background-color: #f2f2f2; height: 100%">
        <div
          style="
            margin: 20px;
            box-shadow: 0px 1px 16px 0px rgba(54, 54, 54, 0.13);
            border-radius: 14px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 20px;
            background-color: #fff;
          "
        >
          <div
            style="
              font-family: PingFang SC;
              font-weight: bold;
              color: #323232;
              margin-bottom: 20px;
            "
          >
            <span>重置信息</span>
          </div>
          <div class="basic-info-input">
            <span class="relative"><sup class="required absolute">*</sup>新支付密码</span>
			<input type="text" readonly="readonly" id="kb1" name="input3" placeholder="请输入密码"
				class="default NoneInput90" maxlength="50" tabindex="3" />
			<script>
				//初始化密码卫士,绑定键盘对象。数字参数：0代表全键盘，1代表数字键盘
				passGuard1.generate("kb1", kb, "passGuard1", 1);
			</script>
          </div>
		  <span id="tips" style="display: none;font-size: 14;color: #666;margin-left: 5px;"></span>
          <div class="basic-info-input">
            <span class="nowrap">验证码</span>
            
			<input type="text" id="verifCode" onfocus="kb.hide();" class="de2 NoneInput90" maxlength="6" />
			
			<button class="nowrap blue no-border" id="sendCodeBtn" onclick="postMessage('getVerifCode')">获取验证码</button>
          </div>

<div class="flex-row flex-align-center">
			<img src="./svg/wenhao.svg" style="width: 14px" alt="" srcset="">
			<span class="color666 font14 margin-left-5">验证码短信向绑定账户的手机号码发送</span>
		  </div>
        </div>
  
        <div style="padding: 0 20px; margin-top: 25px">
          <button
            style="
              background: #ffffff;
              border: 1px solid #4a74ff;
              border-radius: 19px;
              padding: 10px;
              display: flex;
              justify-content: center;
              align-items: center;
              width: 100%;
            "
            onclick="postMessage('submit')"
          >
            <span
              style="
                font-size: 15px;
                font-family: PingFang SC;
                font-weight: 500;
                color: #4a74ff;
              "
              >提交</span
            >
          </button>
        </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);
		// });

// 通过函数调用 拿到父组件的 数据
		window.receiveData = function(data) {
			if (data.randKey) {
				randKey = data.randKey;
				passGuard1.setRandKey(randKey);
				postMessage('getKey')
				document.getElementById('tips').style.display = "block";
				document.getElementById('tips').innerText = '随机因子'+data.randKey;
			} else {
				document.getElementById('tips').style.display = "block";
				document.getElementById('tips').innerText = '随机因子没有传过来';
			}
		};
		// 验证码倒计时
		function startCountdown() {
			const sendCodeBtn = document.getElementById('sendCodeBtn');
			let seconds = 60; // 倒计时秒数

// 禁用按钮并开始倒计时
			sendCodeBtn.disabled = true;
			sendCodeBtn.innerText = '重新发送 (' + seconds + ')';

countdown = setInterval(() => {
			seconds--;
			sendCodeBtn.innerText = '重新发送 (' + seconds + ')';

if (seconds <= 0) {
				clearInterval(countdown); // 清除倒计时
				sendCodeBtn.disabled = false;
				sendCodeBtn.innerText = '获取验证码'; // 恢复按钮文字
			}
			}, 1000); // 每秒更新一次
		};
		// 触发通讯 向react native传递
		function postMessage(eventType='',data={}) {
			var miwen = '';
			var postData = null;
			var postDataStr = '';
			if (window.ReactNativeWebView) {
				switch (eventType) {
					case 'getVerifCode':
						this.startCountdown();
						postData = {eventType};
						postDataStr = JSON.stringify(postData)
						
						window.ReactNativeWebView.postMessage(postDataStr);
					break;
					case 'getKey':
						postData = {eventType};
						postDataStr = JSON.stringify(postData)
						
						window.ReactNativeWebView.postMessage(postDataStr);
					break;
					
					case 'submit':
						let verifCode = document.getElementById('verifCode').value;
						miwen=passGuard1.getOutput();
						postData = {eventType,miwen,verifCode,randKey};
						postDataStr = JSON.stringify(postData)
						
						window.ReactNativeWebView.postMessage(postDataStr);
					break;
				
					default:
						break;
				}
			} else {
				console.log('无法与React Native通信');
			}
		};
	</script>
</body>

</html>

<!DOCTYPE HTML>
<html>

// 通过函数调用 拿到父组件的 数据
		window.receiveData = function(data) {
			if (data.randKey) {
				randKey = data.randKey;
				passGuard1.setRandKey(randKey);
				postMessage('getKey')
			} else {
				document.getElementById('tips').style.display = "block";
				document.getElementById('tips').innerText = '随机因子没有传过来';
			}
		};
		// 验证码倒计时
		function startCountdown() {
			const sendCodeBtn = document.getElementById('sendCodeBtn');
			let seconds = 60; // 倒计时秒数

// 禁用按钮并开始倒计时
			sendCodeBtn.disabled = true;
			sendCodeBtn.innerText = '重新发送 (' + seconds + ')';

countdown = setInterval(() => {
			seconds--;
			sendCodeBtn.innerText = '重新发送 (' + seconds + ')';

if (seconds <= 0) {
				clearInterval(countdown); // 清除倒计时
				sendCodeBtn.disabled = false;
				sendCodeBtn.innerText = '获取验证码'; // 恢复按钮文字
			}
			}, 1000); // 每秒更新一次
		};
		// 触发通讯 向react native传递
		function postMessage(eventType='',data={}) {
			var miwen = passGuard1.getOutput();
			var postData = null;
			var postDataStr = '';
			if (window.ReactNativeWebView) {
				switch (eventType) {
					case 'getVerifCode':
						this.startCountdown();
						postData = {eventType};
						postDataStr = JSON.stringify(postData)
						
						window.ReactNativeWebView.postMessage(postDataStr);
					break;
					case 'getKey':
						postData = {eventType};
						postDataStr = JSON.stringify(postData)
						
						window.ReactNativeWebView.postMessage(postDataStr);
					break;
					
					case 'submit':
						let verifCode = document.getElementById('verifCode').value;
						postData = {eventType,miwen,verifCode,randKey};
						postDataStr = JSON.stringify(postData)
						
						window.ReactNativeWebView.postMessage(postDataStr);
					break;
				
					default:
						break;
				}
			} else {
				console.log('无法与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为时去提交 // 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 () { // this.kbShow(); _$("kb1").focus(); // kb1.focus(); // kb.show() }; </script> </head> <body> <div class="container"> <span id="ittle" style="padding-top: 20px; font-weight: bold; font-size: 16px">请输入密码</span> <span id="type" style="display: none; padding-top: 10px; font-weight: bold; font-size: 14px"></span> <div id="amountBox" style="display: none;"> <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> <span id="tips" style="display: none;font-size: 14;color: #666;margin-left: 5px;"></span> </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 通过 injectJavaScript 注入进行传值 window.receiveData = function(data) { if (data.title) { document.getElementById('title').innerText = (data.title\|\|''); } if (data.type) { document.getElementById('type').style.display = "block"; document.getElementById('type').innerText = (data.type\|\|''); } if (data.amount) { document.getElementById('amountBox').style.display = "block"; document.getElementById('amount').innerText = (data.amount\|\|0); } // let receivedDataStr = data; // let receivedData = JSON.parse(receivedDataStr); // randKey = receivedData.randKey; // randKey = data.randKey; // passGuard1.setRandKey(data.randKey); if (data.randKey) { randKey = data.randKey; passGuard1.setRandKey(randKey); } else { document.getElementById('tips').style.display = "block"; document.getElementById('tips').innerText = '随机因子没有传过来'; } }; // 触发通讯向react native传递 function postMessage(eventType='',data={}) { var miwen = ''; var postData = null; var postDataStr = ''; if (window.ReactNativeWebView) { switch (eventType) { case 'submit': miwen = passGuard1.getOutput(); postData = {eventType,miwen,randKey}; postDataStr = JSON.stringify(postData) 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为时去提交 // 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 () { // this.kbShow(); _$("kb1").focus(); // kb1.focus(); // kb.show() }; </script> </head> <body> <div class="container"> <span id="ittle" style="padding-top: 20px; font-weight: bold; font-size: 16px">请输入密码</span> <span id="type" style="display: none; padding-top: 10px; font-weight: bold; font-size: 14px"></span> <div id="amountBox" style="display: none;"> <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> <span id="tips" style="display: none;font-size: 14;color: #666;margin-left: 5px;"></span> </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 通过 injectJavaScript 注入进行传值 window.receiveData = function(data) { if (data.title) { document.getElementById('title').innerText = (data.title\|\|''); } if (data.type) { document.getElementById('type').style.display = "block"; document.getElementById('type').innerText = (data.type\|\|''); } if (data.amount) { document.getElementById('amountBox').style.display = "block"; document.getElementById('amount').innerText = (data.amount\|\|0); } // let receivedDataStr = data; // let receivedData = JSON.parse(receivedDataStr); // randKey = receivedData.randKey; // randKey = data.randKey; // passGuard1.setRandKey(data.randKey); if (data.randKey) { randKey = data.randKey; passGuard1.setRandKey(randKey); } else { document.getElementById('tips').style.display = "block"; document.getElementById('tips').innerText = '随机因子没有传过来'; } }; // 触发通讯向react native传递 function postMessage(eventType='',data={}) { var miwen = passGuard1.getOutput(); var postData = null; var postDataStr = ''; if (window.ReactNativeWebView) { switch (eventType) { case 'submit': postData = {eventType,miwen,randKey}; postDataStr = JSON.stringify(postData) 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为时去提交
        	//   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 () {
			// this.kbShow();
			_$("kb1").focus();
			// kb1.focus();
			// kb.show()
		};
	</script>
</head>

<body>
	<div class="container">
		<span id="ittle" style="padding-top: 20px; font-weight: bold; font-size: 16px">请输入密码</span>
		<span id="type" style="display: none; padding-top: 10px; font-weight: bold; font-size: 14px"></span>
		<div id="amountBox" style="display: none;">
			<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>
			<span id="tips" style="display: none;font-size: 14;color: #666;margin-left: 5px;"></span>
		</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 通过 injectJavaScript 注入 进行传值  
		window.receiveData = function(data) {
			if (data.title) {
				document.getElementById('title').innerText = (data.title||'');
			}
			if (data.type) {
				document.getElementById('type').style.display = "block";
				document.getElementById('type').innerText = (data.type||'');
			}
			if (data.amount) {
				document.getElementById('amountBox').style.display = "block";
				document.getElementById('amount').innerText = (data.amount||0);
			}
			// let receivedDataStr = data;
			// let receivedData = JSON.parse(receivedDataStr);
			// randKey = receivedData.randKey;
			// randKey = data.randKey;
			// passGuard1.setRandKey(data.randKey);

if (data.randKey) {
				randKey = data.randKey;
				passGuard1.setRandKey(randKey);
			} else {
				document.getElementById('tips').style.display = "block";
				document.getElementById('tips').innerText = '随机因子没有传过来';
			}
		};
		// 触发通讯 向react native传递
		function postMessage(eventType='',data={}) {
			var miwen = '';
			var postData = null;
			var postDataStr = '';
			if (window.ReactNativeWebView) {
				switch (eventType) {
					case 'submit':
						miwen = passGuard1.getOutput();
						postData = {eventType,miwen,randKey};
						postDataStr = JSON.stringify(postData)
						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为时去提交
        	//   submit();
			postMessage('submit')
        }
      }

// 
		function isFocus () {
			// this.kbShow();
			_$("kb1").focus();
			// kb1.focus();
			// kb.show()
		};
	</script>
</head>

if (data.randKey) {
				randKey = data.randKey;
				passGuard1.setRandKey(randKey);
			} else {
				document.getElementById('tips').style.display = "block";
				document.getElementById('tips').innerText = '随机因子没有传过来';
			}
		};
		// 触发通讯 向react native传递
		function postMessage(eventType='',data={}) {
			var miwen = passGuard1.getOutput();
			var postData = null;
			var postDataStr = '';
			if (window.ReactNativeWebView) {
				switch (eventType) {
					case 'submit':
						postData = {eventType,miwen,randKey};
						postDataStr = JSON.stringify(postData)
						window.ReactNativeWebView.postMessage(postDataStr);
					break;
				
					default:
						break;
				}
			} else {
				alert('无法与React Native通信');
			}
		};
	</script>
</body>

</html>

Show line notes below