Jump to content

Telephone input mask


Recommended Posts

I want to use a particular input for telephone numbers.

I have seen working examples, and either need to edit or create code for my end result 

Aside from the usual telephone number mask, this input field dynamically replaces the value/placeholder that is visible.

To elaborate, the user sees the input text box with (___)___-____ displayed.

As digits are entered, the field replaces underscores with digits in a progression until complete.

(21_)___-____ , next (212)55_-____, then (212)555-12__ until finally (212)555-1212

Any direction would be helpful.

Edited by phppup
Link to comment
Share on other sites

Something like this?

<input type="text" name="phone" id="phone" value="(___) ___ - ____" >


        $("#phone").keydown( function(e) {
            var output = $("#phone").val()
            if (output == '') output = "(___) ___ - ____"
            if (output.indexOf('_') != -1) {
                if (48 <= e.keyCode && e.keyCode <= 57) {         // keyboard top row
                    output = output.replace('_', e.keyCode-48)
                else if (96 <= e.keyCode && e.keyCode <= 105) {   // numeric keypad
                    output = output.replace('_', e.keyCode-96)


Link to comment
Share on other sites

This thread is more than a year old.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.