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!important
    }
    
    .hidden {
        visibility: hidden
    }
    
    .dis-flex {
        display: -webkit-flex!important;
        display: -webkit-box!important;
        display: -moz-box!important;
        display: -ms-flexbox!important;
        display: flex!important
    }
    
    .flex-vertical-left {
        -webkit-box-pack: start;
        -webkit-justify-content: flex-start;
        -moz-justify-content: flex-start;
        -ms-justify-content: flex-start;
        -o-justify-content: flex-start;
        justify-content: flex-start
    }
    
    .flex-vertical-right {
        -webkit-box-pack: end;
        -webkit-justify-content: flex-end;
        -moz-justify-content: flex-end;
        -ms-justify-content: flex-end;
        -o-justify-content: flex-end;
        justify-content: flex-end
    }
    
    .flex-vertical-center {
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -moz-justify-content: center;
        -ms-justify-content: center;
        -o-justify-content: center;
        justify-content: center
    }
    
    .flex-vertical-between {
        -webkit-box-pack: justify!important;
        -webkit-justify-content: space-between!important;
        -moz-justify-content: space-between!important;
        -ms-justify-content: space-between!important;
        -o-justify-content: space-between!important;
        justify-content: space-between!important
    }
    
    .flex-horizontal-start {
        -webkit-box-align: start;
        -webkit-align-items: flex-start;
        -moz-align-items: flex-start;
        -ms-align-items: flex-start;
        -o-align-items: flex-start;
        align-items: flex-start
    }
    
    .flex-horizontal-center {
        -webkit-box-align: center;
        -webkit-align-items: center;
        -moz-align-items: center;
        -ms-align-items: center;
        -o-align-items: center;
        align-items: center
    }
    
    .flex-horizontal-end {
        -webkit-box-align: end;
        -webkit-align-items: flex-end;
        -moz-align-items: flex-end;
        -ms-align-items: flex-end;
        -o-align-items: flex-end;
        align-items: flex-end
    }
    
    .flex-column {
        -webkit-box-orient: vertical;
        -webkit-flex-direction: column;
        -moz-flex-direction: column;
        -ms-flex-direction: column;
        -o-flex-direction: column;
        flex-direction: column
    }
    
    .flex-vw {
        -webkit-box-lines: multiple;
        -webkit-flex-wrap: wrap;
        -moz-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        -o-flex-wrap: wrap;
        flex-wrap: wrap
    }
    
    .x-btn-box,
    .x-module-title,
    .x-money-box {
        padding: .18rem
    }
    
    .x-module-title {
        color: #222;
        text-align: left
    }
    
    .x-des-title,
    .x-item,
    .x-module-title {
        background-color: #fff
    }
    
    .x-money-box {
        overflow: hidden;
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: start;
        justify-content: flex-start;
        -webkit-box-align: end;
        align-items: flex-end;
        position: relative;
        padding: 0 .18rem .1rem .18rem;
        border-bottom: 1px solid #d8d8d8;
        color: #3f3f3f
    }
    
    .x-money-box span {
        -webkit-box-flex: 0;
        -moz-flex-grow: 0;
        -webkit-flex-grow: 0;
        flex-grow: 0;
        font-size: .48rem
    }
    
    .x-sham-input {
        position: relative;
        -webkit-box-flex: 1;
        -moz-flex-grow: 1;
        -webkit-flex-grow: 1;
        flex-grow: 1;
        border: none;
        background-color: transparent;
        font-size: .48rem;
        font-weight: 700;
        text-indent: .1rem;
        text-align: left
    }
    
    .x-sham-input .is-empty {
        position: absolute;
        top: 0;
        left: 0;
        color: #e7e7e7
    }
    
    .x-input-cursor {
        width: 1px;
        height: .3rem;
        border-right: 2px solid #497bfb;
        -webkit-animation: fade 1s infinite linear;
        -moz-animation: fade 1s infinite linear;
        -o-animation: fade 1s infinite linear;
        animation: fade 1s infinite linear
    }
    
    .empty-icon {
        position: absolute;
        bottom: .15rem;
        right: 17px;
        width: 18px;
        height.........完整代码请登录后点击上方下载按钮下载查看