2

I am trying to format a US zip code as the user types, and need to add a dash between the 5th and and 6th characters if the user types more than 5 so the the zip code is formatted like

55555 or 55555-5555

what I have now adds a dash, but regardless if a 6th number is added

//zip code formatting
$(".zip-val").keyup(function() {
    if($(this).val().length == 5) {
        $(this).val($(this).val() + "-");
    }
});
Sandra Willford
  • 3,459
  • 11
  • 49
  • 96
  • 1
    similar to: https://stackoverflow.com/questions/31352499/add-dash-in-auto-complete-phone-number – xeo Jun 08 '17 at 03:32
  • 1
    @xeo voting to close as dup of the link you posted – guradio Jun 08 '17 at 03:35
  • 1
    Possible duplicate of [Add dash in auto complete phone number](https://stackoverflow.com/questions/31352499/add-dash-in-auto-complete-phone-number) – guradio Jun 08 '17 at 03:35
  • @guradio but isn't that when you click on the autocomplete and not as you type? – A. L Jun 08 '17 at 03:36

4 Answers4

2

How about this?

//zip code formatting
$(".zip-val").keyup(function() {
    zipcode = $(this).val();
    zipcode = zipcode.replace(/-/g, '');      // remove all occurrences of '-'

    if(zipcode.length > 5) {
        $(this).val(zipcode.substring(0, 5) + "-" + zipcode.substring(5));
    }
});
Aditya
  • 1,693
  • 19
  • 27
2

Could try this, splitting it and keeping the number groups then recreating the string with formats. This even deletes the - if you are not in a group of 5.

You could also modify this to fit into a credit card number system.

//zip code formatting
$(".zip-val").keyup(function() {
    let val = $(this).val();
    if(val.length > 5) {
        let digits = val.split(/(\d{1,5})/);
        let str = "";
        for (let group of digits)
        {
          if (/^\d+$/.test(group))
          {
            str += group + "-";
          }
        }
        str = str.substring(0, str.length - 1);
        $(this).val(str);
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="zip-val" />
A. L
  • 11,695
  • 23
  • 85
  • 163
1

you should check if the length is 6 or not. Also, you can add more check, if the users use backspace on the 6th character, it would also delete the '-' character

$(".zip-val").keyup(function(e) {
    if(e.keyCode == 8)
    {
        if($(this).val().length == 6){
        var newText = $(this).val().substring(0 , 5);
        $(this).val(newText);
      }
    }
    else if($(this).val().length == 6) {
        var newText = $(this).val().substring(0 , 5) + '-' + $(this).val().substring(5);
        $(this).val(newText);
    }
});

demo : https://jsfiddle.net/sn5ghvb8/

Mark
  • 2,041
  • 2
  • 18
  • 35
0

You can try this.

$(".zip-val").keyup(function() {
    if($(this).val().length > 5 ) {
        res = $(this).val().split("");//convert string to array
       if(jQuery.inArray( "-", res )){//checks if dash exist
       for (var i=res.length-1; i>=0; i--) {//removes dashes
          if (res[i] === '-') {
              res.splice(i, 1);
              }
            }
            res.splice(5, 0, "-");    
        }
        $(this).val(res.join(''));
    }
});
Max Calabing
  • 1
  • 1