问类似于citicards.com的html文本掩码模式(a*a)

EN

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>

$(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>

    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>