Mask input in jQuery - without using a library

Question

So I am trying to take US SSN as input and trying to mask it by automatically inserting dashes, not allowing more than 9 digits, etc.

Please see the Fiddle.

My problems with the code is:

I have disabled the arrow keys, that is because if someone goes back using arrow keys and presses backspace ( to do an edit to a specific number), my code breaks, and it inserts extra dashes, which is unacceptable.

My code looks like:

$('#ssn').on("keyup change paste mouseup", function(evt) {
    setTimeout(function() {

        var $ssn = $('#ssn');
        var $length = $ssn.val().length;
        var $value = $ssn.val();

        $ssn.val(formatSSN($value));
    }, 10);

});

// Start of section that prevents arrow keys       
$('#ssn').on("click focus", function(evt) {
    var value = $(this).val();
    $(this).val('').val(value);
});

$('#ssn').on("keydown", function(evt) {

    var key = evt.keyCode;
    if (key >= 37 && key <= 40) {

        $(this).focus();
        var value = $(this).val();
        $(this).val(' ').val(value);
        evt.stopPropagation();
        return false;
    }
});

// End of section that prevents arrow keys

function formatSSN(inputSSN) {
    var dashPositions = [3, 6];
    var inputLength = inputSSN.length;
    var output = inputSSN;
    for (i in dashPositions) {


        if (dashPositions[i] < inputLength) {
            if (output[dashPositions[i]] !== '-') {
                var firstPart = output.substring(0, dashPositions[i]) + '-';
                var secondPart = output.substring(dashPositions[i]);
                output = firstPart + secondPart;
            }
        }

    }
    if (output.length > 11) {
        output = output.substring(0, 11);
    }
    return output;
}

My question is:

Is there any way I can enable the arrow keys, and still preserve the positions of the dashes? (prevent extra/misplaced dashes) ?

Thanks.

try this its a small and simple and can give idea to you .. https://raw.githubusercontent.com/digitalBush/jquery.maskedinput/1.4.1/dist/jquery.maskedinput.js — daremachine, Mar 18 '16 at 05:23
Possible duplicate of http://stackoverflow.com/questions/25367230/masking-a-social-security-number-input — guest271314, Mar 18 '16 at 05:24
@AkshayArora _"that answer uses a plugin"_ Do not believe that either answer uses a plugin , only jQuery . mask plugin is comment at http://jsfiddle.net/w2sccqwy/3/ and not present at http://jsfiddle.net/gtom9tvL/ — guest271314, Mar 18 '16 at 05:28

score 2 · Accepted Answer · answered Mar 18 '16 at 05:44

You could use input event, .prop() , replace() with RegExp /./g , store input at variable before original value replaced ; remove characters from value that are not digits using .test() with RegExp /\D/; use maxlength attribute to set maximum length of input value;

var res = "";

$(".social").on("input", function(e) {
  // current value
  var val = e.target.value.slice(-1);
  // if `val` contains only digit characters
  if (!/\D/.test(val)) {
    res += val;
    console.log(res);
  }
  // remove characters that are not digits from displayed `-`
  if (/\D/.test(val)) {
    e.target.value = e.target.value.slice(0, -1)
  }

  $(this).prop("value", function(i, prop) {
    // set number of characters to mask with `"-"`
    if (prop.length < 7) {
      return prop.replace(/./g, "-")
    }
  })

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input class="social" maxlength="9" />

@AkshayArora You can add `&& res.length < 9` to first `if` condition to limit `res` `.length` to nine characters — guest271314, Mar 18 '16 at 05:51

score 0 · Answer 2 · answered Mar 18 '16 at 05:22

You could use a hidden field to store the actual value. Then, while the user types the value into the visible field, you can use JQuery to capture the keystrokes and display "*" or some other character and then append the captured character to the hidden field. There are libraries that can do this more simply but this works fine ... not elegent but works.

Mask input in jQuery - without using a library

2 Answers2