mui的数字安全键盘适用于手机版h5+

勇闯天亚

于 2019-08-08 00:57:21 发布

阅读量1k

点赞数

分类专栏： MUI 前端 HBuilderX HBuilder 文章标签： mui 安全键盘数字键盘安全数字键盘 js

本文链接：https://blog.csdn.net/u012442504/article/details/98805549

版权

前端同时被 3 个专栏收录

42 篇文章 0 订阅

订阅专栏

MUI

40 篇文章 2 订阅

订阅专栏

HBuilder

15 篇文章 0 订阅

订阅专栏

一、代码引用

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

二、直接粘贴复制拿去用吧，有问题可以回复我，看到后会回复你，有用记得点个赞

勇闯天亚

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
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"&gt...
复制链接

扫一扫