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变的较为流畅，代码仅做参考

 

转载于:https://www.cnblogs.com/lengyue0030/p/10241429.html