Question

我想创建一个带掩码的字段密码：“_ _ _ _”，

使用占位符属性，在输入第一个数字后，字段（“_ _ _ _”）的内容将被清除。

但是当我输入第一个数字时，我需要该字段变为“_ _ ” seconde digit - ＆gt;“ _”等等

使用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>

如何应用掩码在HTML中输入密码？

1 个答案: