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