Masking a social security number input

by

For anyone who might run into this in the future I was able to figure out a solution that will mask any kind of field and format it without messing with any other plugin.

In the html you would need two inputs

<input class="number" />
<input class="value" />

and then position the number field over the value

and then in your javascript

 $('.value').on('keydown keyup mousedown mouseup', function() {
     var res = this.value, //grabs the value
         len = res.length, //grabs the length
         max = 9, //sets a max chars
         stars = len>0?len>1?len>2?len>3?len>4?'XXX-XX-':'XXX-X':'XXX-':'XX':'X':'', //this provides the masking and formatting
        result = stars+res.substring(5); //this is the result
     $(this).attr('maxlength', max); //setting the max length
    $(".number").val(result); //spits the value into the input
});

And a jsFiddle for those who would like to see the result.
http://jsfiddle.net/gtom9tvL/

More Related Contents:

  1. Set style for only the first element using JQuery [closed]
  2. Random JSON where x is true
  3. How does this JavaScript/jQuery syntax work: (function( window, undefined ) { })(window)?
  4. Trying to detect browser close event
  5. What does $(function() {} ); do?
  6. Which keycode for escape key with jQuery
  7. jQuery pass more parameters into callback
  8. what is right way to do API call in react js?
  9. How do I pre-populate a jQuery Datepicker textbox with today’s date?
  10. Remove all classes that begin with a certain string
  11. Commonly accepted best practices around code organization in JavaScript [closed]
  12. Setting onbeforeunload on body element in Chrome and IE using jQuery
  13. How to show a running progress bar while page is loading
  14. jQuery JSON to string?
  15. Use jQuery to detect whether a device can make telephone calls (supports “tel://” protocol)
  16. How do I select an element with its name attribute in jQuery? [duplicate]
  17. jQuery Validation using the class instead of the name value
  18. jQuery duplicate DIV into another DIV
  19. Modify the value of each textfield based on original value using jQuery
  20. In Firebase when using push() How do I pull the unique ID
  21. Drop event not firing in chrome
  22. jQuery/Javascript – How to wait for manipulated DOM to update before proceeding with function
  23. How to keep the changes made to DOM by javascript/jquery on page refresh
  24. Using jQuery AJAX to download a binary file
  25. Inconsistent behavior of toLocaleString() in different browser
  26. How to post an image in base64 encoding via .ajax?
  27. Sorting an Array of JavaScript Objects a Specific Order (using existing function)
  28. Sending a MediaStream to host Server with WebRTC after it is captured by getUserMedia
  29. Datatables TypeError: c is undefined
  30. How to highlight a part part of an Input text field in HTML using Javascript or JQuery

Leave a Comment