欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

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

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

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

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

<div>
  <div>請在下方輸入6位數(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)層，分析下大概思路：

本功能就是一個真實輸入框和6個假輸入框的故事。

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

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

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

輸入的同時，控制假輸入框光標的效果，我用了一張某寶的圖片做成的，實際上，假輸入框是沒有獲取到焦點的。

注意：

　　這里真實輸入框的type類型用的是tel，而不是number。因為后者會生成小箭頭呀，前者在用戶點擊輸入框時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; }

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

 行為層：

$(".ipt-real-nick").on("input", function() {
  //console.log($(this).val());
  var $input = $(".ipt-fake-box input");
  if(!$(this).val()){//無值光標頂置
   $('.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){//模擬光標，先將圖片容器定位，控制left值而已
    $('.ipt-active-nick').css('left',$input.eq(i+1).offset().left-parseInt($('.ipt-box-nick').parent().css('padding-left'))+'px');
   }
   }
   $input.each(function() {//將有值的當前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());
  }
  });

因為tel類型，在pc端兼容問題，所以加了點正則。

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

附上完整代碼：

<!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">請在下方輸入6位數(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()){//無值光標頂置
   $('.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){//模擬光標，先將圖片容器定位，控制left值而已
     $('.ipt-active-nick').css('left',$input.eq(i+1).offset().left-parseInt($('.ipt-box-nick').parent().css('padding-left'))+'px');
    }
   }
   $input.each(function() {//將有值的當前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ù)字密碼輸入框，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

相關(guān)文章

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

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

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

    JavaScript模擬鼠標右鍵菜單效果

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

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

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

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

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

    js實現(xiàn)鼠標感應向下滑動隱藏菜單的方法

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

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

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

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

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

    JS將表單導出成EXCEL的實例代碼

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

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

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

    談談JavaScript中瀏覽器兼容問題的寫法小議

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

最新評論