如何在HTML中應用掩碼來輸入密碼？

Question

我想創建一個面具現場密碼：「_ _ _ _」，

隨着佔位符屬性字段的內容（「_ _ _ _」）簽訂的第一個數字之後被清除。

，但我需要當我鍵入第一個數字領域成爲 「_ _ 」 數字Seconde系列 - > 「 _」 等

任何想法與jQuery或HTML5？

Thnaks提前

Answer 1

我這個代碼將幫助您，您的問題，只有u必須定義自己的行話，而對於例如我所提供的圖案，文字/數字/字符的數字/文字/數字。

 input { 
 
    font-family: monospace; 
 
} 
 
label { 
 
    display: block; 
 
} 
 
div { 
 
    margin: 0 0 1rem 0; 
 
} 
 

 
.shell { 
 
    position: relative; 
 
    line-height: 1; } 
 
    .shell span { 
 
    position: absolute; 
 
    left: 3px; 
 
    top: 1px; 
 
    color: #ccc; 
 
    pointer-events: none; 
 
    z-index: -1; } 
 
    .shell span i { 
 
     font-style: normal; 
 
     /* any of these 3 will work */ 
 
     color: transparent; 
 
     opacity: 0; 
 
     visibility: hidden; } 
 

 
input.masked, 
 
.shell span { 
 
    font-size: 16px; 
 
    font-family: monospace; 
 
    padding-right: 10px; 
 
    background-color: transparent; 
 
    text-transform: uppercase; }  input { 
 
    font-family: monospace; 
 
} 
 
label { 
 
    display: block; 
 
} 
 
div { 
 
    margin: 0 0 1rem 0; 
 
} 
 

 
.shell { 
 
    position: relative; 
 
    line-height: 1; } 
 
    .shell span { 
 
    position: absolute; 
 
    left: 3px; 
 
    top: 1px; 
 
    color: #ccc; 
 
    pointer-events: none; 
 
    z-index: -1; } 
 
    .shell span i { 
 
     font-style: normal; 
 
     /* any of these 3 will work */ 
 
     color: transparent; 
 
     opacity: 0; 
 
     visibility: hidden; } 
 

 
input.masked, 
 
.shell span { 
 
    font-size: 16px; 
 
    font-family: monospace; 
 
    padding-right: 10px; 
 
    background-color: transparent; 
 
    text-transform: uppercase; }

<form action=""> 
 
    
 
    
 
    <div> 
 
    <label for="czc"> Zip Code</label> 
 
    <input id="czc" placeholder="XXX XXX" pattern="\w\d\w \d\w\d" class="masked" 
 
     data-charset="_X_ X_X" id="zipca" type="text" name="zipcodeca" 
 
     title="6-character alphanumeric zip code in the format of A1A 1A1" /> 
 
    </div> 
 

 
</form> 
 

 
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/masking-input.js" data-autoinit="true"></script>