jQuery 모 바 일 알 리 페 이 키보드 구현 코드

최근 프로젝트 를 할 때 필요 한 것 은 모 바 일 결제 페이지 에서 결제 단 추 를 누 르 면 알 리 페 이와 유사 한 결제 키 보드 를 꺼 내 는 것 이다.프로젝트 는 단순 한 모 바 일 사이트 일 뿐 app 이 아니 기 때문에 이 기능 은 전단 에서 이 루어 져 야 한다.말 이 많 지 않 으 니 먼저 그림 을 그 려 서 효 과 를 보아 라.

니 마,이게 알 리 페 이 앱 그 알 리 페 이 키보드 아니 야?맞 아,우리 UI 는 알 리 페 이 를 참조 하여 만 든 이 키보드 야.알 리 페 이 가 제공 하 는 결제 인 터 페 이 스 를 직접 호출 하지 않 는 이 유 를 물 을 수 있 습 니 다.어,프로젝트 가 필요 하기 때문에 여 기 는 설명 이 많 지 않 아.
일단 이 루어 진 효과 도 를 한번 볼 게 요.

HTML 부분

<!--      -->
  <divclass="pay-container">
    <divclass="pay-title">
      <spanclass="pay-title-remove">×</span>
            
    </div>
    <divclass="pay-body">
      <divclass="input-container">
        <inputclass="input-item"type="password"readonly>
        <inputclass="input-item"type="password"readonly>
        <inputclass="input-item"type="password"readonly>
        <inputclass="input-item"type="password"readonly>
        <inputclass="input-item"type="password"readonly>
        <inputclass="input-item"type="password"readonly>
      </div>
      <divclass="forgetPwd-container">
        <aclass="forgetPwd"href="">    ？</a>
      </div>
      <divclass="key-container">
        <divclass="key-item">1</div>
        <divclass="key-item">2</div>
        <divclass="key-item">3</div>
        <divclass="key-item">4</div>
        <divclass="key-item">5</div>
        <divclass="key-item">6</div>
        <divclass="key-item">7</div>
        <divclass="key-item">8</div>
        <divclass="key-item">9</div>
        <divclass="key-item empty"></div>
        <divclass="key-item">0</div>
        <divclass="key-item remove"></div>
      </div>
    </div>
  </div>

CSS 부분

.pay-container{ width:7.5rem; height:8rem; background-color:#fbf9fb; position:fixed;z-index:999; overflow:hidden;display:none; }
/* .pay-container-show{transform: translate3d(0, -8.9rem, 0);transition: 0.5s ease;transform: translate3d(0, 0, 0); transition: 0.5s ease;} */
.pay-title{ height:0.96rem; line-height:0.96rem; border-bottom:1pxsolid#b3afaf; text-align:center; color:#070707;
position:relative; font-size:0.36rem;}
.pay-title.pay-title-remove{ width:0.24rem; height:0.24rem; position:absolute; top:0.35rem; left:0.33rem; line-height:0.28rem;
font-size:0.45rem;}
.pay-body{ padding-top:0.56rem;position:relative; height:7rem; box-sizing:border-box;}
.pay-body.input-container{ width:6.74rem; height:0.93rem; border:1pxsolid#ebe8eb; overflow:hidden; border-radius:5px;
background-color:#fff; margin:0auto; display:flex;flex-direction:row;align-items:center; 
flex-wrap:wrap; justify-content:center;align-content:center;}
.pay-body.input-container.input-item{ width:1.1rem; height:0.92rem; display:inline-block; margin:0; border-right:1pxsolid#ebe8eb;
text-align:center; line-height:0.92rem; border-radius:0; }
.pay-body.input-container.input-item:nth-last-child(1){ border-right:0;}
.pay-body.forgetPwd-container{width:6.74rem;margin:0.22remauto0; text-align:right;}
.pay-body.forgetPwd-container.forgetPwd{ color:#52bfff; font-size:0.24rem; }
.pay-body.key-container{ width:100%; height:4.56rem; position:absolute; bottom:0; display:flex;flex-direction:row;align-items:center; 
  flex-wrap:wrap; justify-content:center;align-content:center; }
.pay-body.key-container.key-item{ width:2.47rem; height:1.12rem; line-height:1.12rem; text-align:center; border-right:2pxsolid#f3f3f3;
  border-top:2pxsolid#f3f3f3; font-size:0.66rem; color:#1e1d1f;background-color:#fff;}
.pay-body.key-container.key-item:nth-child(3),
.pay-body.key-container.key-item:nth-child(6),
.pay-body.key-container.key-item:nth-child(9),
.pay-body.key-container.key-item:nth-child(12){ border-right:0;}
.pay-body.key-container.key-item.remove,.pay-body.key-container.key-item.empty{ font-size:0.24rem;background-color:#e6e9f1;}
.pay-body.key-container.key-item.remove{ background:url('../images/pay-remove.png') centerno-repeat#e6e9f1; background-size:.52rem.32rem; }
.pay-body.key-container.selected{ background-color:#e4e8f4;}

핵심 JS 부분

var arr = [];
    var num =0;

    //      
    $('.key-item').on('touchstart', function () {
      $(this).addClass('selected')
    })
    $('.key-item').on('touchend', function () {
      $(this).removeClass('selected')
    })
    $('.key-item').on('click', function () {
      var value =$(this).text();
      var inputItem =$('.layui-m-layercont .input-item');
      if (!$(this).hasClass('remove')) {
        if (num <6) {
          $(inputItem[num]).val(value);
          if (num ==5) {
            var arr = [];
            for (var i =0; i < inputItem.length; i++) {
              arr.push(inputItem[i].value)
            }
            arr =parseInt(arr.join(''));
            if (arr !==123456) {
              layer.open({
                content:'           ！',
                skin:'msg',
                time:2//2      
              });
            } else {
              layer.open({
                content:'    ！',
                skin:'msg',
                time:2//2      
              });
            }
            num++;
            returnfalse;
          }
          num++;
        }
      } else {
        if (num >0) {
          num--;
          $(inputItem[num]).val('');
        }
      }
    })

총결산
위 에서 말 한 것 은 소 편 이 여러분 에 게 소개 한 jQuery 모 바 일 알 리 페 이 키보드 의 실현 코드 입 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 메 시 지 를 남 겨 주세요.소 편 은 제때에 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!