<!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": 12, // 最大输入长度
"regExp1": "[\\S\\s]", // 输入过程限制的正则
"regExp2": "[\\S\\s]{6,12}",
"displayMode": 0, // 显示形式,0:星号;1:明文,默认值0
"callBack": cb1, //成功回调
"errorCallBack": cb2, //失败回调
"focus": inputFocus1,//H5键盘获取焦点回调
"blur": inputBlur1,//H5键盘失去焦点回调
"rsaPublicKey": "30818902818100ac7916eeb5cc45b22e8a20ebb2cb11ac6b76678564300b70c3f09f8c0cb92076499556c2d60fa02a78d2d3d94a559ee5f65f5f89a94da88e5cade3bf6a412e4832d7380958fee0c9fe959a1e4c45c8c037a04f693210bb76fa0a3a9dbf3bee803e1365572b03848a7aa2e547257e5a8461073fd15b68b381f5bd76ec7fbc4d230203010001" // rsa公钥
});
var passGuard2 = new passGuard(
{
//"mappurl" : "./send_mapping.jsp",//此处为了前端演示而屏蔽了，正常开发中需要此参数，该地址由后台人员提供
"maxLength": 12, // 最大输入长度
"regExp1": "[\\S\\s]", // 输入过程限制的正则
"regExp2": "[\\S\\s]{6,12}",
"displayMode": 0, // 显示形式,0:星号;1:明文,默认值0
"callBack": cb3, //成功回调
"errorCallBack": cb4, //失败回调
"focus": inputFocus2,//H5键盘获取焦点回调
"blur": inputBlur2,//H5键盘失去焦点回调
"rsaPublicKey": "30818902818100ac7916eeb5cc45b22e8a20ebb2cb11ac6b76678564300b70c3f09f8c0cb92076499556c2d60fa02a78d2d3d94a559ee5f65f5f89a94da88e5cade3bf6a412e4832d7380958fee0c9fe959a1e4c45c8c037a04f693210bb76fa0a3a9dbf3bee803e1365572b03848a7aa2e547257e5a8461073fd15b68b381f5bd76ec7fbc4d230203010001" // rsa公钥
});
var passGuard3 = new passGuard(
{
//"mappurl" : "./send_mapping.jsp",//此处为了前端演示而屏蔽了，正常开发中需要此参数，该地址由后台人员提供
"jump": 1, //是否用添加删除回调：1代表使用，0代表不使用(可用于6个格子)
"add": tianjia, //输入框值添加回调,当jump为1时，才有回调
"del": jianshao, //输入框值减少回调,当jump为1时，才有回调
"fixed": "H5fixed",//当fixed接口添加时，代表该输入框在fixed覆盖层上且覆盖层的ID为接口的值(在demo中覆盖层ID为"H5fixed")
"maxLength": 6, // 最大输入长度
"regExp1": "[\\S\\s]", // 输入过程限制的正则
"regExp2": "[\\S\\s]{6,12}",
"displayMode": 0, // 显示形式,0:星号;1:明文,默认值0
"callBack": cb5, //成功回调
"errorCallBack": cb6, //失败回调
"focus": inputFocus3,//H5键盘获取焦点回调
"blur": inputBlur3,//H5键盘失去焦点回调
"rsaPublicKey": "30818902818100ac7916eeb5cc45b22e8a20ebb2cb11ac6b76678564300b70c3f09f8c0cb92076499556c2d60fa02a78d2d3d94a559ee5f65f5f89a94da88e5cade3bf6a412e4832d7380958fee0c9fe959a1e4c45c8c037a04f693210bb76fa0a3a9dbf3bee803e1365572b03848a7aa2e547257e5a8461073fd15b68b381f5bd76ec7fbc4d230203010001" // rsa公钥
});
function cb1() {
console.log("passGuard1输入的密码匹配regExp2");
}
function cb2() {
console.log("passGuard1输入的密码不匹配regExp2");
}
function cb3() {
console.log("passGuard2输入的密码匹配regExp2");
}
function cb4() {
console.log("passGuard2输入的密码不匹配regExp2");
}
function cb5() {
console.log("passGuard3输入的密码匹配regExp2");
}
function cb6() {
console.log("passGuard3输入的密码不匹配regExp2");
}
function inputFocus1() {
console.log("passGuard1输入框获得焦点");
}
function inputBlur1() {
console.log("passGuard1输入框失去焦点");
}
function inputFocus2() {
console.log("passGuard2输入框获得焦点");
}
function inputBlur2() {
console.log("passGuard2输入框失去焦点");
}
function inputFocus3() {
console.log("passGuard3输入框获得焦点");
}
function inputBlur3() {
console.log("passGuard3输入框失去焦点");
}
function tianjia(xh) { //xh为密码的长度
$(".kb3>li").eq(xh - 1).append($("<p class='yuan'></p>"));
if (xh == 6) {
kb.hide();
}
}
function jianshao(xh) {
$(".kb3>li").eq(xh).html("");
}
</script>
</head>
<body>
<!-- <form id="form1" name="form1" method="post" action="return false;">
<div id="Main">
<div id="TitleBar">
<div id="LogoBg_Topbar">
北京微通新成手机网银H5密码控件Demo
</div>
<div id="LoginTab">
<div class="on">
修改密码场景
</div>
</div>
</div>
<div id="InputBlock">
<div id="InputInfoTable">
<div class="line5px"></div>
<table class="InputLine">
<tbody>
<tr>
<td class="left" align="right">
<table class="AutoAlignLabel">
<tr>
<td class="BeginWord">
账
</td>
<td class="EndWord">
号
</td>
</tr>
</table>
</td>
<td class="right" align="left">
<input type="text" value="tester" id="username2" onfocus="kb.hide();"
name="username" class="de2 NoneInput90" maxlength="50" tabindex="1" />
</td>
</tr>
</tbody>
</table>
<div class="line0px"></div>
<table class="InputLine">
<tbody>
<tr>
<td class="left" align="right">
<table class="AutoAlignLabel">
<tr>
<td class="BeginWord">
旧
</td>
<td class="MidWord">
密
</td>
<td class="EndWord">
码
</td>
</tr>
</table>
</td>
<td class="right" align="left" style="position: relative;">
<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>
</td>
</tr>
</tbody>
<tbody>
<tr>
<td class="left" align="right">
<table class="AutoAlignLabel">
<tr>
<td class="BeginWord">
新
</td>
<td class="MidWord">
密
</td>
<td class="EndWord">
码
</td>
</tr>
</table>
</td>
<td class="right" align="left" style="position: relative;">
<input type="text" id="kb2" readonly="readonly" name="input3" placeholder="请输入新密码"
class="default NoneInput90" maxlength="50" tabindex="3" />
<script>
//初始化密码卫士,绑定键盘对象。数字参数：0代表全键盘，1代表数字键盘
passGuard2.generate("kb2", kb, "passGuard2", 0);
</script>
</td>
</tr>
</tbody>
<tbody>
<tr>
<td class="left" align="right">
<table class="AutoAlignLabel">
<tr>
<td class="BeginWord">
确
</td>
<td class="MidWord">
认
</td>
<td class="MidWord">
新
</td>
<td class="MidWord">
密
</td>
<td class="EndWord">
码
</td>
</tr>
</table>
</td>
<td class="right" align="left" style="position: relative;">
<input type="text" id="kb3" readonly="readonly" name="input3" placeholder="请输入确认密码"
class="default NoneInput90" maxlength="50" tabindex="3" />
<script>
//初始化密码卫士,绑定键盘对象。数字参数：0代表全键盘，1代表数字键盘
passGuard3.generate("kb3", kb, "passGuard3", 0);
</script>
</td>
</tr>
</tbody>
</table>
<br />
<div id="LoginBar">
<table id="LoginBtn" ontouchstart="javascript:kb.hide();" onclick="javascript:formSubmit();">
<tr>
<td>
提交
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<input type="hidden" name="password" id="password" value="" />
<input type="hidden" name="repassword" id="repassword" value="" />
</form> -->
<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" />
<script>
//初始化密码卫士,绑定键盘对象。数字参数：0代表全键盘，1代表数字键盘
passGuard2.generate("kb2", kb, "passGuard2", 0);
</script>
<span class="nowrap blue" onclick="postMessage('getVerifCode')">获取验证码</span>
</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 class="basic-info-input">
<span>设置密码</span>
<input type="text" id="kb3" readonly="readonly" name="input3" placeholder="请输入确认密码"
class="default NoneInput90" maxlength="50" tabindex="3" />
<script>
//初始化密码卫士,绑定键盘对象。数字参数：0代表全键盘，1代表数字键盘
passGuard3.generate("kb3", kb, "passGuard3", 1);
</script>
</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">
window.onload = function () {
Le = $(".default").length;
for (var i = 1; i <= Le; i++) {
$("#kb" + i).val("");
};
setTimeout(function () {
kb.generate();
Show = 0;
}, 100);
};
/**
* 登录场景表单提交方法
*/
function formSubmit(){
//判断密码长度
/*if(passGuard1.getLength()==0){
alert("原密码不能为空！");
return false;
}
if(passGuard2.getLength()==0){
alert("新密码不能为空！");
return false;
}
if(passGuard3.getLength()==0){
alert("确认密码不能为空！");
return false;
}*/
//判断密码是否匹配正则
/*if(passGuard2.getValid()==1){
alert("新密码不符合要求！");
return false;
}
if(passGuard3.getValid()==1){
alert("确认密码不符合要求！");
return false;
}
//比对新密码和确认密码
if(passGuard2.getHash() != passGuard3.getHash()){
alert("新密码和确认密码不一致！");
return false;
}*/
//设置32位随机因子,此处为了demo方便演示，写死了，正常应用后台随机下发。
passGuard1.setRandKey("20180911102848206839527896154835");
passGuard2.setRandKey("20180911102848206839527896154835");
//获取密文
var miwen1 = passGuard1.getOutput();
var miwen2 = passGuard2.getOutput();
_$("kb1").value = "";
_$("kb2").value = "";
// _$("kb3").value = "";
// for(var i=1;i<=3;i++){//PH.arrPlace-->H5输入框的placeholder数组；PH.arrId-->H5输入框的id数组
// $("#"+PH.arrId[i-1]).attr('placeholder',PH.arrPlace[i-1]);
// }
return {miwen1,miwen2}
};
// 触发通讯 向react native传递
function postMessage(eventType='',data={}) {
console.log('eventType????',eventType);
console.log('this????',this.formSubmit());
if (window.ReactNativeWebView) {
switch (eventType) {
case 'getVerifCode':
alert('getVerifCode')
window.ReactNativeWebView.postMessage("getVerifCode",data);
break;
case 'submit':
alert('submit')
var miwenData = this.formSubmit()
console.log('miwenData?????',miwenData);
window.ReactNativeWebView.postMessage("submit",data);
break;
default:
break;
}
} else {
alert('无法与React Native通信');
}
};
</script>
</body>
</html>
