I am trying to use jQuery to customize a a text input box to accept phone in North america format like

 (555)-555-5555

I tried to use this at This Demo

2. var fieldval = $('#phone').val();
3.     var length,
4.     var pattern = [3,6]
5.     var maxlength = 11;
6. 
   
7. field.onkeydown = function(event) {
8.     // Length without hyphen
9.     length = fieldval.replace("-", "").length;
10. 
    
11.     if(pattern.indexOf(length) != -1) {
12.         fieldval = field.value + '-';
13.     }
14.     if(fieldval.length > maxlength) {
15.         fieldval = fieldval.substring(0, maxlength);
16.     }
17. }

but it is not working! Technically what I need to do is loading adding () and - whan they meet the specified pathern?

Thanks