4
\$\begingroup\$

I took a base from here and built on it. You call the function with onkeypress (hence live changing).

The function gives output like this for domestic numbers:

(123) 456–7890

When the numbers pass the above character limit (13), the function outputs international numbers like this:

+12 (345) 678-9012

It doesn't handle backspacing elegantly (reformatting), which is on my to-do list. I'm looking for feedback on how to improve.

 var mask = function(content) {
      var val = content.value.split('');
      if (val.length > 13) {
        tel = '+'
      }
      else {tel = '('}
      for(var i=0; i< val.length; i++) {
        if(val[i] == '+'){
          val[i]='';
        }
        if(val[i] =='('){
          val[i]='';
        }
        if(val[i]==')'){
          val[i]='';
        }
        if(val[i]==' '){
          val[i]='';
        }
        if(val[i]=='-'){
          val[i]='';
        }
      }
      for(var i=0; i<val.length; i++){
          if (i==3){
            if (val.length>13) {
            val[i]= ' (' + val[i]; 
            }
            else {
            val[i]=val[i]+') ';
            }
          }
          if (i==7){
            if (val.length>13) {
            val[i]= val[i] + ') ';
              if (val[i+2] == '–') {
                val[i+2]='';
                val[i+5]='–'
              }
            }
          }
          if(i==8 && val[i+1] != '–'){
            if (val.length <= 13) {
            val[i]=val[i]+'–';
            }
          }
          tel=tel+val[i];
      }
      content.value=tel;
    };
\$\endgroup\$

migrated from stackoverflow.com Jun 22 '12 at 21:30

This question came from our site for professional and enthusiast programmers.

3
\$\begingroup\$

Regular expressions are a quicker way to get it done. Here's a naïve implementation that's (I believe) functionally equivalent to yours:

var mask = function (content) {
  var val = content.value.replace(/[^\d]/g, ''); // Remove anything that's not a digit
  if( val.length <= 10 ) { // US number
    content.value = val.replace(/^(\d{3})(\d{3})(\d*)$/, '($1) $2-$3');
  } else { // Other
    content.value = val.replace(/^(\d{2})(\d{3})(\d{3})(\d*)$/, '+$1 ($2) $3-$4');
  }
};

Here's a live demo

But this is far, far from perfect. There are many, many things to consider.

For starters, non-US numbers aren't necessarily longer than US ones. My own number is just 8 digits (or 10, if you count the country digits - or 12 if you use "00xx" instead of "+xx" for the country code). So if I wrote my phone number (as I normally would) as "+xx xx xx xx xx", it'd be formatted as a US number - which it isn't. If I wrote "00xx xx xx xx xx", I'd get "+00 ...", which is also wrong since it's an invalid country code.

On top of that, there's a ton of different local conventions for how to write phone numbers.

Point is that you can't go by the phone-number-length alone.

Regardless of how far you want to go with it, though, regular expressions will come in handy. Here's a nice interactive reg exp demo/tester to get you started.

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.