H5自定义金额键盘,改良后ios体验效果流畅
下载的别人的插件改良一下,源码地址:https://github.com/XieTongXue/how-to/tree/master/pay-h5
没有插件,直接来代码
<div class="pay-input-money"> <div class="input-left"> <span>输入消费金额</span> </div> <div class="input-right"> <span>¥</span> <label id="paymoney" type="text"></label> </div> </div> <div class="payinfo"> <table cellspacing="0" cellpadding="0"> <tr> <td class="paynum">1</td> <td class="paynum">2</td> <td class="paynum">3</td> <td id="pay-return"> <div class="keybord-return"></div> </td> </tr> <tr> <td class="paynum">4</td> <td class="paynum">5</td> <td class="paynum">6</td> <td rowspan="3" class="pay"> <a href="javascript:return false;"> <div class="a-pay"> <p>确认</p> <p>支付</p> </div> </a> </td> </tr> <tr> <td class="paynum">7</td> <td class="paynum">8</td> <td class="paynum">9</td> </tr> <tr> <td id="pay-zero" colspan="2" class="payzero">0</td> <td id="pay-float">.</td> </tr> </table> </div>
css代码可以参考源码
js代码:
$(".paynum").each(function(){ $(this).on("touchstart",function(e){ e.preventDefault(); if(($paymoney.text()).indexOf(".") != -1 && ($paymoney.text()).substring(($paymoney.text()).indexOf(".") + 1, ($paymoney.text()).length).length == 2){ return; } if($.trim($paymoney.text()) == "0"){ return; } if (parseInt($paymoney.text()) > 10000 && $paymoney.text().indexOf(".") == -1) { return; } // $('.pay').removeClass('pay-disabled').find('a').attr('href','pay-result.html'); $paymoney.text($paymoney.text() + $(this).text()); // upperCaseMoney.text(digitUppercase($paymoney.text())); }); }); $("#pay-return").on("touchstart",function(e){ e.preventDefault(); $paymoney.text(($paymoney.text()).substring(0, ($paymoney.text()).length - 1)); upperCaseMoney.text(digitUppercase($paymoney.text())); // if (!$paymoney.text()) { // upperCaseMoney.text(''); // $('.pay').addClass('pay-disabled').find('a').attr('href', 'javascript:return false;'); // } }); $("#pay-zero").on("touchstart",function(e){ e.preventDefault(); if(($paymoney.text()).indexOf(".") != -1 && ($paymoney.text()).substring(($paymoney.text()).indexOf(".") + 1, ($paymoney.text()).length).length == 2){ return; } if($.trim($paymoney.text()) == "0"){ return; } if (parseInt($paymoney.text()) > 10000 && $paymoney.text().indexOf(".") == -1) { return; } $paymoney.text($paymoney.text() + $(this).text()); }); $("#pay-float").on("touchstart",function(e){ e.preventDefault(); if($.trim($paymoney.text()) == ""){ return; } if(($paymoney.text()).indexOf(".") != -1){ return; } if(($paymoney.text()).indexOf(".") != -1){ return; } $paymoney.text($paymoney.text() + $(this).text()); });
将touchstart事件替换click时间,iOS变的较为流畅,代码仅做参考
posted on 2019-01-08 21:03 lengyue0030 阅读(829) 评论(0) 编辑 收藏 举报