最近做项目时碰到一个需求，就是在移动端支付页面点击支付按钮弹出一个支付键盘，类似于支付宝的那种。由于项目只是单纯的手机网站，而并非app，所以这个功能得由前端来实现。话不多说，先上图看看效果。
尼玛，这不就是支付宝app那个支付键盘吗？ 没错，咱们UI就是参照支付宝做的这个键盘。你可能会问，为什么不直接调用支付宝提供的支付接口呢。额，因为项目需要，这里就不多解释了。
我们先看一下实现后的效果图
HTML部分
最近做项目时碰到一个需求，就是在移动端支付页面点击支付按钮弹出一个支付键盘，类似于支付宝的那种。由于项目只是单纯的手机网站，而并非app，所以这个功能得由前端来实现。话不多说，先上图看看效果。
尼玛，这不就是支付宝app那个支付键盘吗？ 没错，咱们UI就是参照支付宝做的这个键盘。你可能会问，为什么不直接调用支付宝提供的支付接口呢。额，因为项目需要，这里就不多解释了。
我们先看一下实现后的效果图
HTML部分
CSS部分
核心JS部分
//响应键盘事件
$('.key-item').on('touchstart',function () {
$(this).addClass('selected')
})
$('.key-item').on('touchend',function () {
$(this).removeClass('selected')
})
$('.key-item').on('click',function () {
var value =$(this).text();
var inputItem =$('.layui-m-layercont .input-item');
if (!$(this).hasClass('remove')) {
if (num <6) {
$(inputItem[num]).val(value);
if (num ==5) {
var arr = [];
for (var i =0; i < inputItem.length; i++) {
arr.push(inputItem[i].value)
}
arr =parseInt(arr.join(''));
if (arr !==123456) {
layer.open({
content:'支付密码错误请重新输入！',skin:'msg',time:2//2秒后自动关闭
});
} else {
layer.open({
content:'输入正确！',time:2//2秒后自动关闭
});
}
num++;
returnfalse;
}
num++;
}
} else {
if (num >0) {
num--;
$(inputItem[num]).val('');
}
}
})</pre>
以上所述是小编给大家介绍的jQuery仿移动端支付宝键盘的实现代码。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。