仿某寶6位數字密碼輸入框

来源:http://www.cnblogs.com/puyongsong/archive/2016/12/28/6223798.html
-Advertisement-
Play Games

下個月就要過年了，感覺有點瞎忙。翻了翻博客，感覺這個月都在打醬油啊。藉口那麼多，其實真的有點懶了，呵呵！ 我爭取在放假前，將自我總結以及來年計劃發出來，把自己打造為勉族，不然真要渾噩度日了。 前幾天，項目有個功能和某寶購物支付密碼的輸入框有點類似，就自己寫了這篇博文，權當總結筆記吧。 啰嗦半天了，直 ...


　　下個月就要過年了，感覺有點瞎忙。翻了翻博客，感覺這個月都在打醬油啊。藉口那麼多，其實真的有點懶了，呵呵！

　　我爭取在放假前，將自我總結以及來年計劃發出來，把自己打造為勉族，不然真要渾噩度日了。

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

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

結構層：

<div>
      <div>請在下方輸入6位數字</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>

通過結構層，分析下大概思路：

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

  • 將真實輸入框和假輸入框容器都定位重疊，註意將真實輸入框的優先順序設置較高，不然就輸入不了咯。
  • 為了做成看似假輸入框在輸入，則將真實輸入框隱藏，用opacity隱藏哦。
  • 用戶輸入時，通過行為層js將真實輸入框的值分配給每個假輸入框。
  • 輸入的同時，控制假輸入框游標的效果，我用了一張某寶的圖片做成的，實際上，假輸入框是沒有獲取到焦點的。

註意：

　　這裡真實輸入框的type類型用的是tel，而不是number。因為後者會生成小箭頭呀，前者在用戶點擊輸入框時app判斷type是tel就會彈出數字輸入鍵盤更好。

表現層：

.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; }
View Code

　　樣式裡面就一個定位重疊，一個隱藏真實輸入框，我就不想多嘮叨了。css我用sass寫的，轉譯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())){//有值只能是數字
          //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) {
            //執行其他操作
            console.log('輸入完整，執行操作');
          }
        }else{//清除val中的非數字，返回純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>仿支付寶數字密碼輸入框</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位數字</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="//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())){//有值只能是數字
            //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) {
                //執行其他操作
                console.log('輸入完整，執行操作');
            }
        }else{//清除val中的非數字，返回純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>
View Code

效果演示：

回家擼的代碼和公司寫的時候有點出入，萬變不離其宗，效果出來就ok啦。

要過年咯，有個世界公敵已出現^_^一個'懶'字足矣打敗everybody！浪起來丫！

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • BridgePattern(橋接模式)
    /** * 橋接模式 * @author TMAC-J * 應用於多維度方案 * 用組合的形式代替繼承 * 符合單一職責原則 * 一個類只有一個引起他變化的原因 * 增加程式靈活性 */ public class BridgePattern { abstract class Road{ Car ca... ...
  • java 設計模式
    目錄： 設計模式六大原則（1）：單一職責原則 設計模式六大原則（2）：里氏替換原則 設計模式六大原則（3）：依賴倒置原則 設計模式六大原則（4）：介面隔離原則 設計模式六大原則（5）：迪米特法則 設計模式六大原則（6）：開閉原則 設計模式六大原則（1）：單一職責原則 定義：不要存在多於一個導致類變更 ...
  • TYPESDK手游聚合SDK服務端設計思路與架構之二：服務端設計
    在前一篇文中，我們對一個聚合SDK服務端所需要實現的功能作了簡單的分析。通過兩個主要場景的功能流程圖，我們可以看到，作為多款游戲要適配多個渠道的統一請求轉發中心，TYPESDK服務端主要需要實現的功能有以下幾個要點： l 接收請求和返迴響應，通常是HTTP的請求響應。 l 獲取配置信息。 n 識別游 ...
  • ES6之變數常量字元串數值
    ECMAScript 6 是 JavaScript 語言的最新一代標準,當前標準已於 2015 年 6 月正式發佈,故又稱 ECMAScript 2015。 ES6對數據類型進行了一些擴展 在js中使用ES6必須先聲明 嚴格模式 "use strict" let變數 let特性： 1、不允許重覆聲明 ...
  • 5.2 Array類型的方法彙總
    項目上，經常需要對數組操作。所以，本文重點講解Array類型的一些常見的操作方法。 ...
  • 5.0 JS中引用類型介紹
    “什麼是引用類型？”。如果你學過Java或者PHP編程的話，那麼我可以通俗的打個比方的講下，js中的引用類型就好比PHP或者Java中的Class類；那麼引用類型的值（即對象）好比PHP/Java中的Class類實例化後的對象。 ...
  • HTML5筆記2——HTML5音/視頻標簽詳解
    音視頻的發展史 早期：<embed>+<object>+文件 問題：不是所有瀏覽器都支持，而且embed不是標準。 現狀：Realplay、window media、Quick Time 、Flash 問題：每個廠商每個標準，網站編碼和格式也都不相同，flash的出現解決了面的問題，但是apple在 ...
  • form表單驗證-Javascript
    Form表單驗證： js基礎考試內容，form表單驗證，正則表達式，blur事件，自動獲取數組，以及css佈局樣式，動態清除等。完整代碼如下： 效果 如下圖所示： 【結語】 三人行，必有我師焉。 ——請多多支持，多多評論。 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類