Length issue with mask for a custom phone field

We have a phone number field for which we are doing the masking manually in the model as below

{ name: 'phonenumber',

type: 'number',

convert:function(phone) {

if(phone) {

phone = phone.replace(/[^0-9]/g, '');

phone = phone.replace(/(\d{3})(\d{3})(\d{4})/, "($1) $2-$3");

return phone;

}

}

},

so that when a user enters 1234567890,it gets automatically converted to (123) 456-7890

To accommodate the braces, hyphen and space, we have defined the maxlength as 14.

Now the issue is, at times if we keep on pressing a single number,or type numbers very fast,user is able to enter maximum of 14 numbers as the field maxlength is 14.

Thanks,

Roger

Is there way to display masking on the blank text box, so that when user enters numbers masking will already be present? If not, any pointers to fix this issue will be really helpful.

Length issue with mask for a custom phone field