How to Create an InputMask for a PhoneNumber in an EditTemplate field in DetailsView

I have a phone number in an EditTemplate field within a DetailsView control and would like to know how I can create an input mask so that the mask is (999) 999-9999

Any ideas?


Chris S.

Why would you want to use a phone number mask that doesn’t fit most phone numbers? Phone numbers vary dramatically in how long each of the component parts of the number are depending on where in the world the phone number is.

You would have to use javascript. Try one of the jquery plugins for input masking. Usually works pretty well

I have tried using a jQuery plugin, but it does not appear to work for the editTemplate. Any thoughts what event I should place it in? I can upload the code if needed.

Jquery plugin would be client-side, I don’t think it would ever even be aware of the server-side event model. Anyhow, I haven’t touched webforms in some time but my first thought would be to look at the ajax control toolkit, specifically the MaskedEdit bits.

Personally I wouldn’t waste much time on an input mask for phone numbers – even if you are robodialing stuff most decent robodialers have some ability to parse phone numbers.

Thanks wwb_99. I was just trying to set up a format for internal use only where users would enter the number in themselves. I decided to use HTML5 to display how the phone number should be entered, but I’m not going to worry about validating it for now. I haven’t been able to find a good AJAX example for phone numbers themselves and I’m trying to just use HTML5 and jQuery where I can and avoid the AJAX Control Toolkit. I successfully used jQuery on a web form text box server control, but just can’t make it work in a Details Grid.

It is probably mainly an issue of finding the ID of the control. You can expose it via the ClientID property or you can cheat and use a css class to mark it and get the reference for jquery that way.