Question

I’m trying to make 10 digits look like a US telephone number (i.e.(###) ###-####). My code does accomplish this first goal, but it also does something I can’t quite figure out. When typing in the digits, the characters “()” show up before typing any other digits. I want the open parenthesis to appear first and the closing parathesis to appear after entering the third digit. Please don’t give me a new solution; try to pin point the issue I’m describing.

<script type="text/javascript">
  $('.drumbi-caller-number').live('keydown', function (event) {
    if (event.keyCode == 8 || event.keyCode == 37 || event.keyCode == 39) {
    } else {
        inputval = $(this).val();
        var string = inputval.replace(/[^0-9]/g, "");
        var first3 = string.substring(0,3);
        var next3 = string.substring(3,6);
        var next4 = string.substring(6,9);  
        var string = ("(" + first3 + ")" + next3 + "-" + next4);
        $(this).val(string);
    }
});
</script>

Here’s a jsFiddle that displays this behavior: http://jsfiddle.net/bigthyme/j6kHn/3/

Answer 1

You need to check the length of first3 before appending the paren:

var string = ("(" + first3 + ((first3.length>=3)?")":"") + next3 + "-" + next4);

And although not in your question, you can do the same for the hyphen:

var string = ("(" + first3 + 
     // only append the ) if the you have 3+ chars
     ((first3.length>=3)?")":"") + 
     next3 + 
     // only append the - if the you have 6+ chars
     (((first3+next3).length>=6)?"-":"") + 
     next4);

You should also use .on() instead of live();

See it all working in this jsFiddle