<!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>
<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);
});
// 验证码倒计时
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':
alert('getVerifCode');
this.startCountdown();
postData = {eventType};
postDataStr = JSON.stringify(postData)
window.ReactNativeWebView.postMessage(postDataStr);
break;
case 'submit':
alert('submitNew11???');
let verifCode = document.getElementById('verifCode').value;
postData = {eventType,miwen,verifCode,randKey};
postDataStr = JSON.stringify(postData)
console.log('postData?????',postData);
console.log('postDataStr?????',postDataStr);
console.log('verifCode?????',verifCode);
window.ReactNativeWebView.postMessage(postDataStr);
break;
default:
break;
}
} else {
alert('无法与React Native通信');
}
};
</script>
</body>
</html>
