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

EN

    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>