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 .. raw.githubusercontent.com/digitalBush/jquery.maskedinput/1.4.1/… — daremachine
– daremachine, Commented Mar 18, 2016 at 5:23
Possible duplicate of stackoverflow.com/questions/25367230/… — guest271314
– guest271314, Commented Mar 18, 2016 at 5:24
@AkshayArora "that answer uses a plugin" Do not believe that either answer uses a plugin , only jQuery . mask plugin is comment at jsfiddle.net/w2sccqwy/3 and not present at jsfiddle.net/gtom9tvL — guest271314
– guest271314, Commented Mar 18, 2016 at 5:28

guest271314 · Accepted Answer · 2016-03-18 05:44:35Z

2

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" />

answered Mar 18, 2016 at 5:44

guest271314

1

Sign up to request clarification or add additional context in comments.

1 Comment

guest271314 Over a year ago

@AkshayArora You can add && res.length < 9 to first if condition to limit res .length to nine characters

LuvnJesus · Accepted Answer · 2016-03-18 05:22:18Z

0

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.

answered Mar 18, 2016 at 5:22

LuvnJesus

6314 silver badges9 bronze badges

Collectives™ on Stack Overflow

Mask input in jQuery - without using a library

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related