jquery实现手机端移动端支付页面数字键盘效果代码-html代码-BFW代码库

代码语言：html

代码描述：jquery实现手机端移动端支付页面数字键盘效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title></title>
    <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <!-- Mobile Devices Support @begin -->

    <meta content="no-cache,must-revalidate" http-equiv="Cache-Control">
    <meta content="no-cache" http-equiv="pragma">
    <meta content="0" http-equiv="expires">
    <meta content="telephone=no, address=no" name="format-detection">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <!-- apple devices fullscreen -->
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <!-- Mobile Devices Support @end -->

    <style>
        *,body,h1,h2,h3,h4,h5,p{font-family:"Microsoft Yahei";padding:0;margin:0;font-size:14px}li,ol,ul{list-style-type:none;padding:0;margin:0}a{text-decoration:none;color:#000}.fr{float:right!important}.m-height{background:#f4f4f4;border-bottom:1px solid #e5e5e5;border-top:1px solid #e5e5e5;height:10px;width:100%}
           
           @charset "UTF-8";
    @media screen and (max-width:319px) {
        html {
            font-size: 85.33333px
        }
    }
    
    @media screen and (min-width:320px) and (max-width:359px) {
        html {
            font-size: 85.33333px
        }
    }
    
    @media screen and (min-width:360px) and (max-width:374px) {
        html {
            font-size: 96px
        }
    }
    
    @media screen and (min-width:375px) and (max-width:383px) {
        html {
            font-size: 100px
        }
    }
    
    @media screen and (min-width:384px) and (max-width:399px) {
        html {
            font-size: 102.4px
        }
    }
    
    @media screen and (min-width:400px) and (max-width:413px) {
        html {
            font-size: 106.66667px
        }
    }
    
    @media screen and (min-width:414px) {
        html {
            font-size: 110.4px
        }
    }
    
    article,
    aside,
    blockquote,
    body,
    button,
    code,
    dd,
    div,
    dl,
    dt,
    fieldset,
    figcaption,
    figure,
    footer,
    form,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    header,
    input,
    legend,
    li,
    menu,
    nav,
    ol,
    p,
    pre,
    section,
    td,
    textarea,
    th,
    ul {
        margin: 0;
        padding: 0
    }
    
    body {
        font-family: "微软雅黑", Helvetica, STHeiTi, sans-serif;
        line-height: 1.5;
        font-size: 16px;
        color: #000;
        background-color: #f8f8f8;
        -webkit-user-select: none;
        -webkit-text-size-adjust: 100%;
        -webkit-tap-highlight-color: transparent;
        outline: 0
    }
    
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-size: 100%;
        font-weight: 400
    }
    
    table {
        border-collapse: collapse;
        border-spacing: 0
    }
    
    caption,
    th {
        text-align: left
    }
    
    fieldset,
    img {
        border: 0
    }
    
    li {
        list-style: none
    }
    
    ins {
        text-decoration: none
    }
    
    del {
        text-decoration: line-through
    }
    
    button,
    input,
    optgroup,
    option,
    select,
    textarea {
        font-family: inherit;
        font-size: inherit;
        font-style: inherit;
        font-weight: inherit;
        outline: 0
    }
    
    button {
        -webkit-appearance: none;
        border: 0;
        background: 0 0
    }
    
    a {
        -webkit-touch-callout: none;
        text-decoration: none
    }
    
    :focus {
        outline: 0;
        -webkit-tap-highlight-color: transparent
    }
    
    em,
    i {
        font-style: normal
    }
    
    ::-webkit-input-placeholder {
        color: #e7e7e7!important
    }
    
    :-moz-placeholder {
        color: #e7e7e7!important
    }
    
    ::-moz-placeholder {
        color: #e7e7e7!important
    }
    
    :-ms-input-placeholder {
        color: #e7e7e7!important
    }
    
    .hide {
        display: none!important
    }
    
    .bg-white {
        background-color: #fff
    }
    
    .text-center {
        text-align: center
    }
    
    .x-container {
        position: relative;
        width: 100%;
        height: 100%
    }
    
    .x-btn {
        display: block;
        text-align: center;
        border-radius: 3px;
        -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .3);
        -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .3);
        box-shadow: 0 1px 1px rgba(0, 0, 0, .3);
        -webkit-transition: all .2s;
        -moz-transition: all .2s;
        transition: all .2s
    }
    
    .x-btn:active {
        box-shadow: 0 2px 3px transparent
    }
    
    .pos-relative {
        position: relative
    }
    
    .pos-absolute {
        position: absolute
    }
    
    .dis-block {
        display: block
    }
    
    .no-margin-left {
        margin-left: 0!important
    }
    
    .padding-left-20 {
        padding-left: 20px!important
    }
    
    .margin-top-5 {
        margin-top: 5px!important
    }
    
    .margin-top-20 {
        margin-top: 20px!important
    }
    
    .margin-left-5 {
        margin-left: 5px!important
    }
    
    .margin-left-10 {
        margin-left: 10px!important
    }
    
    .margin-left-20 {
        margin-left: 20px!important
    }
    
    .margin-right-10 {
        margin-right: 10px!important
    }
    
    .margin-right-20 {
        margin-right: 20px!important
    }
    
    .margin-bottom-10 {
        margin-bottom: 10px!important
    }
    
    .margin-bottom-20 {
        margin-bottom: 20px!important
    }
    
    .no-bg-color {
        background-color: transparent!important
    }
    
    .color-red {
        color: #f96269!important
    }
    
    .color-gray {
        color: #171717!important
    }
    
    .color-light-gray {
        color: #aeaeae!important
    }
    
    .small-font {
        font-size: .12rem
    }
    
    .no-border-right {
        border-right: 0!important
    }
    
    .no-border-bottom {
        border-bottom: 0!i.........完整代码请登录后点击上方下载按钮下载查看