当前位置 博文首页 > u012442504的专栏：mui的数字安全键盘适用于手机版h5+
一、代码引用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" type="text/css" href="css/mui.min.css" />
<title>模拟数字键盘</title>
<style type="text/css">
table#number_input {
background-color: white;
position: fixed;
width: 70%;
left: 15%;
text-align: center;
bottom:17.625rem;
padding: 10px 10px;
}
table#number_input td {
border: 1px solid gainsboro;
border-right: 0;
width: 10%;
height: 40px;
}
table#number_input td:last-child {
border-right: 1px solid gainsboro;
}
table#keyboard {
position: fixed;
bottom: 0;
left: 0;
right: 0;
text-align: center;
width: 100%;
height: 165px;
background-color: white;
font-size: 1.5625rem;
}
table#keyboard td {
border: 1px solid gainsboro;
border-right: 0;
border-bottom: 0;
width: 33%;
height: 4.125rem;
}
table#keyboard td:enabled {
color: red;
}
table#keyboard td:last-child {
border-right: 1px solid gainsboro;
}
.zhifu{
background-color: white;
position: fixed;
width: 100%;
left: 0;
text-align: center;
bottom: 15.275rem;
padding: 52px 0px;
}
</style>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<h1 class="mui-title">模拟数字键盘</h1>
</header>
<form class="mui-input-group" id="biaodan" style="top: 50px;">
<div class="mui-input-row">
<input type="text" name="money" class="mui-input-clear" style="word-wrap : break-word ;" placeholder="输入提现金额，必须为整数" id="money" />
</div>
</form>
<div class="mui-popover mui-popover-bottom mui-popover-action " id="sheet2" >
<div class="mui-content">
<div class="zhifu">
<div class="jianpan" id="jianpans" style="width: 100%;bottom: 20.275rem;position: fixed;text-align: center;"><span class="mui-icon mui-icon-arrowdown"></span>安全键盘</div>
<table id="number_input" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="input-item"></td>
<td class="input-item"></td>
<td class="input-item"></td>
<td class="input-item"></td>
<td class="input-item"></td>
<td class="input-item"></td>
</tr>
</tbody>
</table>
</div>
<table id="keyboard" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="keyboard-number">1</td>
<td class="keyboard-number">2</td>
<td class="keyboard-number">3</td>
</tr>
<tr>
<td class="keyboard-number">4</td>
<td class="keyboard-number">5</td>
<td class="keyboard-number">6</td>
</tr>
<tr>
<td class="keyboard-number">7</td>
<td class="keyboard-number">8</td>
<td class="keyboard-number">9</td>
</tr>
<tr>
<td class="keboard-action" data-action="reset">重置</td>
<td class="keyboard-number">0</td>
<td class="keboard-action" data-action="cancel">删除</td>
</tr>
</tbody>
</table>
</div>
</div>
<script src="js/mui.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//唤起数字键盘并隐藏软键盘
mui('.mui-input-group').on('tap','#money',function(){
plus.key.hideSoftKeybord();
mui('#sheet2').popover('toggle');
});
//点击安全键盘文字隐藏键盘
mui('.money').on('tap','#jianpan',function(){
mui('#sheet2').popover('toggle');
});
mui.ready(function() {
// 数字索引
var activeIndex = 0;
// 密码结果
var resultValue = "";
// 所有输入框
var inputList = mui(".input-item");
// 所有数字键
var numberList = mui(".keyboard-number");
// 数字键盘点击事件
mui("#keyboard").on("tap", ".keyboard-number", function() {
if(activeIndex == 6) {
return;
}
var num = this.innerText;
addNumber(num);
});
mui("#keyboard").on("tap", ".keboard-action", function() {
var value = this.getAttribute("data-action");
switch(value) {
case "cancel":
if(activeIndex == 0) {
return;
}
cancelNumber();
break;
case "reset":
resetInput();
break;
default:
break;
}
});
// 添加数字
function addNumber(num) {
inputList[activeIndex].innerText = "*";
resultValue += num;
activeIndex++;
// 检测密码长度
if(activeIndex == 6) {
mui('#sheet2').popover('toggle');
// 假定123456是正确密码
if(resultValue != "123456") {
wrongPassword();
} else {
mui.toast("密码正确，然后跳转到下一个页面");
}
}
}
// 撤销数字
function cancelNumber() {
activeIndex--;
inputList[activeIndex].innerText = "";
resultValue = resultValue.substring(0, resultValue.length - 1);
}
// 密码框置空
function resetInput() {
activeIndex = 0;
resultValue = "";
mui(".input-item").each(function(index, element) {
element.innerText = "";
});
}
// 密码错误
function wrongPassword() {
mui.confirm("密码错误", "验证结果", ["再来一次", "密码忘了"], function(event) {
var index = event.index;
if(index == 0) {
mui.toast("请再次输入");
} else {
mui.toast("下一步跳转到忘记密码的页面");
}
resetInput();
});
}
});
</script>
</body>
</html>二、直接粘贴复制拿去用吧，有问题可以回复我，看到后会回复你，有用记得点个赞
cs