亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

JavaScript仿支付寶6位數(shù)字密碼輸入框

 更新時(shí)間：2016年12月29日 08:47:22   作者：webNick  
最近做了一個(gè)項(xiàng)目，涉及到某寶購物支付密碼的輸入框功能，下面小編把實(shí)現(xiàn)思路分享到腳本之家平臺供大家參考

　　前幾天，項(xiàng)目有個(gè)功能和某寶購物支付密碼的輸入框有點(diǎn)類似，就自己寫了這篇博文，權(quán)當(dāng)總結(jié)筆記吧。

　　啰嗦半天了，直接上代碼：

結(jié)構(gòu)層：

<div>
  <div>請?jiān)谙路捷斎?位數(shù)字</div>
  <div class="ipt-box-nick">
  <input type="tel" maxlength="6" class="ipt-real-nick"/>
  <div class="ipts-box-nick">
   <div class="ipt-fake-box">
   <input type="text" >
   <input type="text" >
   <input type="text" >
   <input type="text" >
   <input type="text" >
   <input type="text" >
   </div>
  </div>
  <div class="ipt-active-nick"><img src="https://t.alipayobjects.com/images/rmsweb/T1nYJhXalXXXXXXXXX.gif"></div>
  </div>
 </div>

通過結(jié)構(gòu)層，分析下大概思路：

本功能就是一個(gè)真實(shí)輸入框和6個(gè)假輸入框的故事。

將真實(shí)輸入框和假輸入框容器都定位重疊，注意將真實(shí)輸入框的優(yōu)先級設(shè)置較高，不然就輸入不了咯。

為了做成看似假輸入框在輸入，則將真實(shí)輸入框隱藏，用opacity隱藏哦。

用戶輸入時(shí)，通過行為層js將真實(shí)輸入框的值分配給每個(gè)假輸入框。

輸入的同時(shí)，控制假輸入框光標(biāo)的效果，我用了一張某寶的圖片做成的，實(shí)際上，假輸入框是沒有獲取到焦點(diǎn)的。

注意：

　　這里真實(shí)輸入框的type類型用的是tel，而不是number。因?yàn)楹笳邥尚〖^呀，前者在用戶點(diǎn)擊輸入框時(shí)app判斷type是tel就會彈出數(shù)字輸入鍵盤更好。

表現(xiàn)層：

.ipt-box-nick {
 height: 40px !important;
 line-height: 40px !important;
 position: relative !important; }
 .ipt-box-nick .ipt-real-nick {
 position: absolute !important;
 top: 0 !important;
 left: 0 !important;
 width: 100%;
 height: 40px !important;
 line-height: 40px !important;
 opacity: 0 !important;
 z-index: 3 !important; }
 .ipt-box-nick .ipts-box-nick {
 position: absolute !important;
 top: 0 !important;
 left: 0 !important;
 z-index: 1 !important;
 width: 100%;
 height: 40px !important;
 line-height: 40px !important;
 overflow: hidden; }
 .ipt-box-nick .ipts-box-nick .ipt-fake-box {
  height: 40px !important;
  line-height: 40px !important;
  display: flex !important;
  justify-content: space-between !important; }
  .ipt-box-nick .ipts-box-nick .ipt-fake-box input {
  width: 40px !important;
  height: 40px !important;
  border: 1px solid #D7D7D7 !important;
  color: #810213 !important;
  font-weight: bold !important;
  font-size: 18px !important;
  text-align: center !important;
  padding: 0 !important; }
 .ipt-box-nick .ipt-active-nick {
 width: 40px !important;
 height: 40px !important;
 line-height: 40px !important;
 text-align: center;
 position: absolute !important;
 top: 0;
 left: 0;
 z-index: 2; }
 .ipt-box-nick .ipt-active-nick img {
  vertical-align: middle; }

　　樣式里面就一個(gè)定位重疊，一個(gè)隱藏真實(shí)輸入框，我就不想多嘮叨了。css我用sass寫的，轉(zhuǎn)譯css有點(diǎn)亂，博友們將就看看吧。

 行為層：

$(".ipt-real-nick").on("input", function() {
  //console.log($(this).val());
  var $input = $(".ipt-fake-box input");
  if(!$(this).val()){//無值光標(biāo)頂置
   $('.ipt-active-nick').css('left',$input.eq(0).offset().left-parseInt($('.ipt-box-nick').parent().css('padding-left'))+'px');
  }
  if(/^[0-9]*$/g.test($(this).val())){//有值只能是數(shù)字
   //console.log($(this).val());
   var pwd = $(this).val().trim();
   for (var i = 0, len = pwd.length; i < len; i++) {
   $input.eq(i).val(pwd[i]);
   if($input.eq(i).next().length){//模擬光標(biāo)，先將圖片容器定位，控制left值而已
    $('.ipt-active-nick').css('left',$input.eq(i+1).offset().left-parseInt($('.ipt-box-nick').parent().css('padding-left'))+'px');
   }
   }
   $input.each(function() {//將有值的當(dāng)前input后的所有input清空
   var index = $(this).index();
   if (index >= len) {
    $(this).val("");
   }
   });
   if (len == 6) {
   //執(zhí)行其他操作
   console.log('輸入完整，執(zhí)行操作');
   }
  }else{//清除val中的非數(shù)字，返回純number的value
   var arr=$(this).val().match(/\d/g);
   $(this).val($(this).val().slice(0,$(this).val().lastIndexOf(arr[arr.length-1])+1));
   //console.log($(this).val());
  }
  });

因?yàn)閠el類型，在pc端兼容問題，所以加了點(diǎn)正則。

本身沒有什么復(fù)雜的東西，我就不多啰嗦了，需要注意的地方都加注釋了。

附上完整代碼：

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>仿支付寶數(shù)字密碼輸入框</title>
 <style>
  .ipt-box-nick {
   width:300px;
   height: 40px !important;
   line-height: 40px !important;
   position: relative !important; }
  .ipt-box-nick .ipt-real-nick {
   position: absolute !important;
   top: 0 !important;
   left: 0 !important;
   width: 100%;
   height: 40px !important;
   line-height: 40px !important;
   opacity: 0 !important;
   z-index: 3 !important; }
  .ipt-box-nick .ipts-box-nick {
   position: absolute !important;
   top: 0 !important;
   left: 0 !important;
   z-index: 1 !important;
   width: 100%;
   height: 40px !important;
   line-height: 40px !important;
   overflow: hidden; }
  .ipt-box-nick .ipts-box-nick .ipt-fake-box {
   height: 40px !important;
   line-height: 40px !important;
   display: flex !important;
   justify-content: space-between !important; }
  .ipt-box-nick .ipts-box-nick .ipt-fake-box input {
   width: 40px !important;
   height: 38px !important;
   border: 1px solid #D7D7D7 !important;
   color: #810213 !important;
   font-weight: bold !important;
   font-size: 18px !important;
   text-align: center !important;
   padding: 0 !important;
   border-radius:2px;}
  .ipt-box-nick .ipt-active-nick {
   width: 40px !important;
   height: 40px !important;
   line-height: 40px !important;
   text-align: center;
   position: absolute !important;
   top: 0;
   left: 0;
   z-index: 2; }
  .ipt-box-nick .ipt-active-nick img {
   vertical-align: middle; }
 </style>
</head>
<body>
<div>
 <div class="lh40-nick h40-nick fwb-nick">請?jiān)谙路捷斎?位數(shù)字</div>
 <div class="ipt-box-nick mb15-nick">
  <input type="tel" maxlength="6" class="ipt-real-nick"/>
  <div class="ipts-box-nick">
   <div class="ipt-fake-box">
    <input type="text" >
    <input type="text" >
    <input type="text" >
    <input type="text" >
    <input type="text" >
    <input type="text" >
   </div>
  </div>
  <div class="ipt-active-nick"><img src="https://t.alipayobjects.com/images/rmsweb/T1nYJhXalXXXXXXXXX.gif"></div>
 </div>
</div>
<script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script>
 $(".ipt-real-nick").on("input", function() {
  //console.log($(this).val());
  var $input = $(".ipt-fake-box input");
  if(!$(this).val()){//無值光標(biāo)頂置
   $('.ipt-active-nick').css('left',$input.eq(0).offset().left-parseInt($('.ipt-box-nick').parent().css('padding-left'))+'px');
  }
  if(/^[0-9]*$/g.test($(this).val())){//有值只能是數(shù)字
   //console.log($(this).val());
   var pwd = $(this).val().trim();
   for (var i = 0, len = pwd.length; i < len; i++) {
    $input.eq(i).val(pwd[i]);
    if($input.eq(i).next().length){//模擬光標(biāo)，先將圖片容器定位，控制left值而已
     $('.ipt-active-nick').css('left',$input.eq(i+1).offset().left-parseInt($('.ipt-box-nick').parent().css('padding-left'))+'px');
    }
   }
   $input.each(function() {//將有值的當(dāng)前input后的所有input清空
    var index = $(this).index();
    if (index >= len) {
     $(this).val("");
    }
   });
   if (len == 6) {
    //執(zhí)行其他操作
    console.log('輸入完整，執(zhí)行操作');
   }
  }else{//清除val中的非數(shù)字，返回純number的value
   var arr=$(this).val().match(/\d/g);
   $(this).val($(this).val().slice(0,$(this).val().lastIndexOf(arr[arr.length-1])+1));
   //console.log($(this).val());
  }
 });
</script>
</body>
</html>

效果演示：

以上所述是小編給大家介紹的JavaScript仿支付寶6位數(shù)字密碼輸入框，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

相關(guān)文章

  • ES6 Promise對象的含義和基本用法分析

    ES6 Promise對象的含義和基本用法分析

    這篇文章主要介紹了ES6 Promise對象的含義和基本用法,結(jié)合實(shí)例形式分析了Promise的含義、功能、基本用法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下
    2019-06-06
  • JavaScript模擬鼠標(biāo)右鍵菜單效果

    JavaScript模擬鼠標(biāo)右鍵菜單效果

    這篇文章主要為大家詳細(xì)介紹了JavaScript模擬鼠標(biāo)右鍵菜單效果的實(shí)現(xiàn)代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2016-03-03
  • 詳解數(shù)組Array.sort()排序的方法

    詳解數(shù)組Array.sort()排序的方法

    JavaScript中數(shù)組的sort()方法主要用于對數(shù)組的元素進(jìn)行排序。其中，sort()方法有一個(gè)可選參數(shù)。接下來通過本文給大家介紹數(shù)組Array.sort()排序的方法，需要的朋友參考下
    2017-03-03
  • 細(xì)說webpack源碼之compile流程-rules參數(shù)處理技巧(1)

    細(xì)說webpack源碼之compile流程-rules參數(shù)處理技巧(1)

    webpack作為一種流行的打包工具被廣泛應(yīng)用在web項(xiàng)目的前端工程化構(gòu)建中。下面通過本文給大家介紹webpack源碼之compile流程-rules參數(shù)處理技巧，感興趣的朋友一起看看吧
    2017-12-12
  • js實(shí)現(xiàn)鼠標(biāo)感應(yīng)向下滑動隱藏菜單的方法

    js實(shí)現(xiàn)鼠標(biāo)感應(yīng)向下滑動隱藏菜單的方法

    這篇文章主要介紹了js實(shí)現(xiàn)鼠標(biāo)感應(yīng)向下滑動隱藏菜單的方法,涉及javascript操作鼠標(biāo)事件的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
    2015-02-02
  • 微信小程序選擇器組件picker簡單入門

    微信小程序選擇器組件picker簡單入門

    微信小程序picker表單選擇器的使用,根據(jù)官方介紹的有點(diǎn)不清楚,下面這篇文章主要給大家介紹了關(guān)于微信小程序選擇器組件picker的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2023-03-03
  • nestjs實(shí)現(xiàn)圖形校驗(yàn)和單點(diǎn)登錄的示例代碼

    nestjs實(shí)現(xiàn)圖形校驗(yàn)和單點(diǎn)登錄的示例代碼

    本文主要介紹了nestjs實(shí)現(xiàn)圖形校驗(yàn)和單點(diǎn)登錄的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2023-05-05
  • JS將表單導(dǎo)出成EXCEL的實(shí)例代碼

    JS將表單導(dǎo)出成EXCEL的實(shí)例代碼

    這是寫好的例子可以測試一下就明白了，有需要的朋友可以參考一下
    2013-11-11
  • javascript實(shí)現(xiàn)循環(huán)廣告條效果

    javascript實(shí)現(xiàn)循環(huán)廣告條效果

    這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)循環(huán)廣告條效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2017-12-12
  • 談?wù)凧avaScript中瀏覽器兼容問題的寫法小議

    談?wù)凧avaScript中瀏覽器兼容問題的寫法小議

    本篇文章主要介紹了JavaScript中瀏覽器兼容問題的寫法小議，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。
    2016-12-12

最新評論