Apply mask when typing in input field, when typing a number show asterisk instead of numbers or letters

Asked

Viewed 260 times

-1

how do I apply mask in input field, when the user is typing instead of appearing the numbers/letters I want to appear in this input field the special characters (*). Example: 999*****99.

  • The input type password wouldn’t solve your case ?

  • Not because when the user is going to type he will complete with asterisk, I need that when he type will appear number + asterisk + number.

1 answer

0

I found this answer in SOEN (https://stackoverflow.com/questions/45113132/partial-password-masking-on-input-field). You can adapt your reality, it practically does what you want.

 var ssn = document.getElementById('ssn');
    ssn.addEventListener('input', ssnMask, false);
    var ssnFirstFive = "";
    var secondHalf = "";
    var fullSSN = "";

    function ssnMask(){
        if (ssn.value.length <= 5){
            ssn.type = 'password';
        }
        else{
            detectChanges();
            secondHalf = ssn.value.substring(5);
            ssn.type = 'text';
            ssn.value = "•••••";
            ssn.value += secondHalf;
            fullSSN = ssnFirstFive + secondHalf;
        }
    }

    function detectChanges() {
        for (var i = 0; i < 5; i++){
            if (ssn.value[i] != "•"){
                ssnFirstFive = ssnFirstFive.substring(0, i) + ssn.value[i] + ssnFirstFive.substring(i+1);
            }
        }
    }
<input type="password" id="ssn" maxlength=9 />

  • Thank you, I will implement this solution in my form, this is exactly what I needed. vlwwww

  • Accept the answer then as resolved. :)

Browser other questions tagged

You are not signed in. Login or sign up in order to post.