按下输入时的Javascript Masking

Question

I am working on a custom masking input text box for a ssn. When the users enters in there SSN I have the value saved in a global variable. I have a span next to the text box if they click on the span the value becomes masked. Ex 555-55-5555 to xxx-xx-5555. Now I want the user to be able to edit the value from this state For example, 22x-xx-5555 and I want it to save for the current value of the box 225-55-5555. Any suggestions? Right now I am passing the real value var conversion 555-55-5555 and turning it into an array and capturing the keypress of the new value var currentValue also turning it to an array. After I have an if statement comparing the lengths meaning the changed the value. Not sure what to do after.

currentMask(realValue) {
    var self = this;
    self.element.addEventListener('keyup', e => {
        if (self.element.getAttribute('type') === 'ssn') {
            var keycode = (e.which) ? e.which : e.keyCode;
            if ((keycode >= 48 && keycode <= 57) || keycode === 8 || keycode === 8 || keycode === 9 || keycode === 37 || keycode === 39) {
                var conversion = realValue.split("");
                var currentValue = self.element.value.split("");
                if (conversion.length === currentValue.length) {
                    var finale = conversion.concat(currentValue);
                }
                return true;
            }
            e.preventDefault();
            return false;
        }
    });
}

Answer 1

Is this what you were after?

Here we are using the native 'password' type that masks the input. Upon clicking the show textbox, it will simply convert that input into a text type which will reveal the value.

https://jsfiddle.net/zoo67k86/

HTML

<input id="ssn" type="password" placeholder="ssn">
Show: <input id="show" type="checkbox">

JS

document.getElementById('show').addEventListener('click', function(e){
    if(e.target.checked){
    document.getElementById('ssn').setAttribute('type', 'text');
  } else{
    document.getElementById('ssn').setAttribute('type', 'password');
  }
});

Answer 2

Alternatively, you could have four input boxes and detect the blur event to set the previous input boxes to the password type.

https://jsfiddle.net/zoo67k86/1/

HTML

<div id="ssn">
  <input id="ssn1" data-order="1" maxlength="4">
  <input id="ssn2" data-order="2" maxlength="4">
  <input id="ssn3" data-order="3" maxlength="4">
  <input id="ssn4" data-order="4" maxlength="4">
</div>

JS

var ssns = document.getElementsByTagName('input');

for(var i = 0; i < ssns.length; i++){
    ssns[i].addEventListener('blur', function hideEarlierSibling(e){
    var earlierInput = e.target.previousElementSibling;
    if(earlierInput){
        earlierInput.setAttribute('type', 'password');
    }
  });
}