如何在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>