javascript - html 文本掩码模式 (a****a) 就像 citicards.com

Question

citicards.com如何实现带有特殊掩码的登录ID文本框？

当您键入“johndoe”并将焦点移开时，文本框变为“jo***oe”

是否有带图案的 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 设置为与输入元素相同的样式。