Masking Inputs Any Field And Values

I would like to know how to get the length of an input and replace everything between the values start and end but leave 2 chars and both ends. I don't want to predefine the length

Solution 1:

if your output is acceptable on other field, this might be useful

$("#input").on("keyup", function() {
 
  var input = $(this).val().split("")
  var res = $.map(input, (el, ix) => {
    return ix < 2 || ix > input.length - 3? el:"*"
  })

  $("#output").html(res.join(""));
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="password" id="input" />
<br><span id="output"></span>

Solution 2:

If you are using jQuery what you can do is :

// Util function to mask the value
function maskValue(value) {
    if (typeof value !== 'string' || value.length <= 4) {
        return value;
    }
    return value.split('').map((v, i) => { return (i > 1 && i < value.length - 2 ? '*' : v); }).join('');
}

// actual value (not masked)
let actualValue = '';

// keyup event to handle new input and mask the value
$("#my-input").on("keyup", function(event) {
    if (event.key === 'Backspace') {
        actualValue = actualValue.substring(0, actualValue.length - 1);
    }
    else {
        actualValue += event.key;
    }
    $('#my-input').val(maskValue(actualValue));
});

Please keep in mind that this is not perfect as it only supports normal keys (letters, numbers, symbols) and the backspace button.