html文本掩码模式（a **** a）喜欢citicards.com

Question

citicards.com如何使用特殊掩码实现登录ID文本框？

键入＆＃34; johndoe＆＃34;并集中注意文本框变为＆＃34; jo *** oe＆＃34;

是否有带模式的HTML5掩码？

Answer 1

以下是使用纯javascript的所需行为的示例实现。这只是一个样本。在实际使用substr

之前，您可能需要进行长度检查等

  
document.querySelector("input#accountName").addEventListener("blur", function() {
  var value = this.value;
  document.querySelector("#maskedAccountName").textContent=this.value.substr(0,2)+this.value.substr(2,value.length-2).replace(/./g,"*")+this.value.substr(this.value.length-2, this.value.length);
this.style.display = "none";
document.querySelector("#maskedAccountName").style.display = "block";
}, false);

document.querySelector("#maskedAccountName").addEventListener("click", function() {
   this.style.display = "none";
   document.querySelector("input#accountName").style.display = "block";
   document.querySelector("input#accountName").focus();
}, false);

div#maskedAccountName {
  border: 1px solid rgba(231, 231, 231, 0.67);
  padding: 2px;
  display: none;
  border-top-style: inset;
  -webkit-appearance: textfield;
  background-color: white;
  width: 120px;

}

  <input type="text" id="accountName">
  
  <div id="maskedAccountName">

  </div>

我没有更改现有input值的原因是，在表单提交中访问时，我可能无法读取原始值。所以我创建了一个隐藏的div，代替原始输入元素。您可以使用CSS将div设置为与input元素相同。

Answer 2

你必须使用JS / jQuery。首先计算你想要从起点和终点开始的字母，然后用*替换其他所有字母并附加到假输入字段。

你可以在这里看到这个（将opacity替换为0来完全隐藏输入字段，display: none在这里不起作用，因为你必须点击输入本身）：

$(document).ready(function() {
  $("#hField").focusin(
    function() {
      $('#hFieldSp').text($(this).val());
    });
  $("#hField").focusout(function() {
    var start = '';
    var end = '';
    var value = $(this).val();
    var stars = '';

    if (value.length < 3) {
      return;
    }

    if (value.length > 6) {
      start = value.substring(0, 2);
      end = value.substring(value.length - 2);
      stars = '*'.repeat(Math.max(1, value.length - 4));
    } else {
      start = value.substring(0, 1);
      end = value.substring(value.length - 1);
      stars = '*'.repeat(Math.max(1, value.length - 2));
    }

    $('#hFieldSp').text(start + stars + end);
  });

  $(document).on('input paste change', '#hField', function() {
    $('#hFieldSp').text($(this).val());
  });
});

String.prototype.repeat = function(num) {
  return new Array(num + 1).join(this);
}

.wrapper {
  float: left;
  position: relative;
}
#hField,
#hFieldSp {
  width: 100px;
  height: 30px;
  line-height: 30px;
  border: 1px solid #ddd;
}
#hField {
  opacity: .2;
  position: absolute;
  left: 0;
  top: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div id="hFieldSp"></div>
  <input type="text" id="hField" />
</div>

Answer 3

我会使用虚拟输入来显示。然后在模糊时，将值传输到隐藏输入并更改虚拟文本中的文本。如果用户想要更改值，您可能还需要反向操作：在焦点上，将隐藏输入中的值复制到虚拟对象。这是一个示例，不需要jQuery，如果输入中的字符少于5个，则会生成所有* s。

    var start = 0;
    var end = 4;
    var dummy_user = document.getElementById("user");
    var actual_user = document.getElementById("hidden_user");
    dummy_user.addEventListener("blur", function() {
        actual_user.value = dummy_user.value;
        if (dummy_user.value.length > 4) {
            start = 2;
            end = dummy_user.value.length - 2;
        }
        var val = "";
        for (var i = 0; i < start; i++) {
            val += dummy_user.value[i];
        }
        for (i = start; i < end; i++) {
            val += "*";
        }
        for (i = end; i < dummy_user.value.length; i++) {
            val += dummy_user.value[i];
        }
        dummy_user.value = val;
    });
    dummy_user.addEventListener("focus", function() {
        this.value = actual_user.value;
    });

    <form action="">
        <input type="text" name="user" id="user">
        <input type="hidden" name="hidden_user" id="hidden_user" value="">
        <input type="password" name="password">
        <input type="submit" value="Sign in">
    </form>