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

Question

我想創建一個帶有掩碼的字段密碼：“ _ _ _ _”，

使用占位符屬性時，輸入的第一個數字后將清除字段（“ _ _ _ _”）的內容。

但是當我輸入第一個數字時，我需要該字段變為“ _ _ 第二個數字->” _”，依此類推

對jquery或HTML5有任何想法嗎？

提前致謝

Answer 1

我的這段代碼將幫助您解決問題，只有您必須定義自己的模式，例如，我將模式指定為字符/數字/字符數字/字符/數字。

  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>