jQuery仿移动端支付宝键盘的实现代码

最近做项目时碰到一个需求，就是在移动端支付页面点击支付按钮弹出一个支付键盘，类似于支付宝的那种。由于项目只是单纯的手机网站，而并非app，所以这个功能得由前端来实现。话不多说，先上图看看效果。

尼玛，这不就是支付宝应用那个支付键盘吗？没错，咱们用户界面就是参照支付宝做的这个键盘。你可能会问，为什么不直接调用支付宝提供的支付接口呢。额，因为项目需要，这里就不多解释了。

我们先看一下实现后的效果图

超文本标记语言部分

！-支付键盘-div class=' pay-container ' div class=' pay-title ' span class=' pay-title-remove '/span输入支付密码/div class=' pay-body ' div class=' input-container ' input class=' input-item ' type=' password ' readonly input class=' password ' readonly input class=' input-item ' type=' password ' readonly input class=' input-item ' type=' password ' readonly/div class='忘形“集装箱”忘记密码？/a/div div class=' key-container ' div class=' key-item ' 1/div class=' key-item ' 2/div class=' key-item ' 3/div class=' key-item ' 4/div class=' key-item ' 5/div class=' key-item ' 6/div class=' key-item ' 7/div class=' key-item ' 8/div class=' key-item ' 9/div class=' key-item '空/div div class='部分。付费容器{ width:7.5rem高度：8雷姆；背景-颜色： # fbf 9fb位置：固定；z指数：999;飞越：隐藏；display:none}/*。pay-container-show { transform : translate 3d(0，-8.9rem，0)；过渡： 0.5秒轻松；transform: translate3d(0，0，0)；过渡： 0.5秒轻松；} */.薪酬{ height:0.96rem线高：0.96雷姆；边界-底部：1 pxsolid # B3 afaf；文本对齐：居中；颜色： # 070707位置：相对；font-size :0.36 rem}.付费标题。支付-所有权-移除{ width :0.24 rem高度：0.24毫米；位置：绝对；top :0 . 35 remleft :0 . 33 rem线高：0.28雷姆；字号：0.45雷姆；}.支付体{ padding-top :0.56 rem；位置：相对；高度：7雷姆；盒子大小：边框盒子；}.付费机构。输入容器{ width :6.74 remheight :0.93 remorder :1 pixsolid # ebe8eb飞越：隐藏；边界半径：5像素；背景-color : # fff；边距：0自动显示： flex flex-方向：行；对齐-项目：居中；柔性包装：包装；正义-内容：中心；align-内容中心：}.付费机构。输入容器。输入项{宽度：1。1雷姆；height:0.92remdisplay :直列块；margin :0 border-right :1 pxsolid # ebe8eb；文本对齐：居中；线高：0.92毫米；边界半径：0;}.付费机构。输入容器。input-item : th-last-child(1){ border-right :0；}.付费机构。健忘pwd-容器{宽度：6.74雷姆；边缘3 33600.22 re mauto 0；向右文本对齐：}.付费机构。健忘pwd-容器。健忘{ color : # 52bffffont-size :0.24 rem；}.付费机构。密钥容器{宽度：100%；高度：4.56雷姆；位置：绝对；底部：0;display : flex flex-direction :行；对齐-项目：居中；柔性包装：包装；正义-内容：中心；align-内容中心：}.付费机构。钥匙盒。关键项目{ width :2.47 rem高度：1.12毫米线高：1.12毫米；文本对齐：居中；边框-右侧：2 pxsolid # F3 F3边框-顶部：2 pxsolid # f3f 3；font-size :0.66 rem颜色： # 1e 1d 1f背景-color : # fff；}.付费机构。钥匙盒。第：个孩子(3)的关键项目.付费机构。钥匙盒。第：个孩子(6岁)的关键项目.付费机构。钥匙盒。第：个孩子(9岁)的关键项目.付费机构。钥匙盒。关键项目： th-child(12){ border-right :0；}.付费机构。钥匙盒。关键项目。移除.付费机构。钥匙盒。关键项目。空{ font-size :0.24 rem背景-color : # e6e 9 f1；}.付费机构。钥匙盒。关键项目。移除背景： URL('./图像/付费删除。png’)中心无重复# e6e 9 f1背景尺寸：52雷姆。32雷姆；}.付费机构。钥匙盒。选中{底色： # e4e 8 F4；}核心射流研究…部分

var arr=[]；var num=0；//响应键盘事件$('.键项')。on('touchstart '，function () { $(this)).addClass(')选定')}) $('。键项')。on('touchend '，function () { $(this).removeClass(“”选定')}) $('。键项')。on('click ')，function () { var value=$(this).text()；var inputItem=$(' .layui-m-layer con .输入项');if(！$(这个)。有类(' remove '){ if(num 6){ $(InputItem[num]).val(值);if(num==5){ var arr=[]；for(var I=0；I InputItem . lengthi){ arr . push(InputItem[I]).value)} arr=ParSeint(arr。联接(" ")；如果(arr！==123456){ layer。打开({ content : '支付密码错误请重新输入!'，skin:'msg '，time:2//2秒后自动关闭});} else { layer.open({ content: '输入正确!'，skin:'msg '，time:2//2秒后自动关闭});} numreturnfalse { num } } else { if(num 0){ num-；$(inputItem[num]).val(" ")；} } })总结

以上是边肖介绍的jQuery在移动终端上模仿支付宝键盘的实现代码。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！