<h:inputSecret maxlength="6" value="#{userBean.field}" />

<h:form class="form">
    <h:inputSecret maxlength="6" value="#{userBean.field}" class="pass"/>
</h:form>

//creating mask from real value according to required steps
function createMask(value) {
    var mask = "";
    var valueLen = value.length;
    if (valueLen === 1) {
        mask = value;
    } else if (valueLen === 2) {
        mask = "*" + value.substring(1, 2);
    } else if (valueLen === 3) {
        mask = "**" + value.substring(2, 3);
    } else if (valueLen === 4) {
        mask = "**" + value.substring(2, 4);
    } else if (valueLen === 5) {
        mask = "**" + value.substring(2, 5);
    } else if (valueLen === 6) {
        mask = "**" + value.substring(2, 4) + "**";
    }
    //if maxLength>6 then add more else ifs
    return mask;
}

$(document).ready(function () {
    var timer = "";
    //add hidden field to hold actual typed value
    $(".form").append($('<input type="hidden" class="hidpassw" />'));
    //give hidden field the same name as original
    $(".hidpassw").attr("name", $(".pass").attr("name"));
    //change original type from password to text and remove name property
    $(".pass").attr("type", "text").removeAttr("name");
    //get maxlength attr value of original field
    var maxLength = parseInt($(".pass").attr("maxlength"));

    //alphanumeric chars are added to value
    $("body").on("keypress", ".pass", function (e) {
        var code = e.which;
        var length = $(".hidpassw").val().length;
        //modify regex if it doesnt fit your 'alphanumeric' definition
        if (/^[a-zA-Z0-9]$/i.test(String.fromCharCode(code))) {
            //check if maxLength is not reached
            if (length < maxLength) {
                //if length is less them maxLength then add typed alphanumeric char to hidden value
                var character = String.fromCharCode(code);
                $(".hidpassw").val($(".hidpassw").val() + character);
            }
        }
    });

    //special case for backspace
    $("body").on("keydown", ".pass", function (e) {
        var code = e.which;
        var length = $(".hidpassw").val().length;
        if (code === 8) {
            e.preventDefault();
            if (length > 0) {
                clearTimeout(timer);
                $(".hidpassw").val($(".hidpassw").val().substring(0, length - 1));
                $(".pass").val(createMask($(".hidpassw").val()));
            }
        }
    });


    $("body").on("keyup", ".pass", function (e) {
        var length = $(".hidpassw").val().length;
        if (length <= maxLength) {
            clearTimeout(timer);
            //show last typed char for 100ms and then mask it
            timer = setTimeout(function () {
                $(".pass").val(createMask($(".hidpassw").val()));
            }, 100);
        }
    });
});