title: Javascript Masking on key press of input
body: <p>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.</p>
  
  <pre><code>currentMask(realValue) {
      var self = this;
      self.element.addEventListener('keyup', e =&gt; {
          if (self.element.getAttribute('type') === 'ssn') {
              var keycode = (e.which) ? e.which : e.keyCode;
              if ((keycode &gt;= 48 &amp;&amp; keycode &lt;= 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;
          }
      });
  }
  </code></pre>