自定义数字、小数点号键盘，页面禁止缩放、禁止复制

效果图

HTML代码

<div class="keyboard">
            <div class="heng"><div class="key">1</div><div class="key">2</div><div class="key">3</div></div>
            <div class="heng"><div class="key">4</div><div class="key">5</div><div class="key">6</div></div>
            <div class="heng"><div class="key">7</div><div class="key">8</div><div class="key">9</div></div>
            <div class="heng"><div class="key">.</div><div class="key">0</div><div class="key" id="delete">退格</div></div>
</div>

CSS代码

.keyboard {
    width: 100%;
    height: 700px;
    position: fixed;
    bottom: 0;
    margin-left: -5px;
    margin-bottom: -10px;
}
.keyboard .heng {
    height: 170px;
    line-height: 170px;
    width: 100%;
}
.keyboard .heng .key {
    float: left;
    width: 33%;
    height: 170px;
    text-align: center;
    border: 1px solid #c2c2c2;
    background-color: white;
    color: #666;
    font-weight: 100;
}

JS代码 id为money的标签为输入框

<script type="text/javascript">

    moneyStr = '';
    $(".key").on('click', function() {
        totalStr = $("#money").val()
        long = totalStr.length

        var arr = totalStr.split('.')
        var left = arr[0]
        var right = arr[1]


        if (typeof(right) != 'undefined') {
            var leftLen = left.length
            var rightLen = right.length

            if ($(this).attr('id') != 'delete') {
                if (rightLen <= 1) {
                    if (leftLen <= 5) {
                        moneyStr += $(this).text()

                        $("#money").val(moneyStr)
                    }
                }
            }else {

                if (rightLen <= 2) {
                    if (leftLen <= 7) {


                        moneyStr = moneyStr.substr(0, parseInt(long)-1)
                        $("#money").val(moneyStr)
                    }
                }
            }

        }else {
            var leftLen = left.length
            if (leftLen <= 8) {

                if ($(this).attr('id') != 'delete') {
                    if (leftLen <= 7) {
                        moneyStr += $(this).text()
                    }                   
                }else {
                    moneyStr = moneyStr.substr(0, parseInt(long)-1)
                }
                $("#money").val(moneyStr)
            }
        }
    })

</script>

页面优化

1:

支付宝是在页面中的输入框，防止弹出系统键盘，input框为 disabled，千万别用 disabled，因为读不出来

微信支付使用ajax没关系

2: 加上下面这几行代码会让键盘效果更好

页面禁止缩放代码

<meta name="viewport" content="user-scalable=no">

页面禁止复制 css代码

body {
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}