Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Phone mask with jQuery and Masked Input Plugin

I have a problem masking a phone input with jQuery and Masked Input Plugin.

There are 2 possible formats:

  1. (XX)XXXX-XXXX
  2. (XX)XXXXX-XXXX

Is there any way to mask it accepting both cases?

EDIT:

I tried:

$("#phone").mask("(99) 9999-9999"); 
$("#telf1").mask("(99) 9999*-9999");    
$("#telf1").mask("(99) 9999?-9999"); 

But it doesn't works as I would like.

The closest one was (xx)xxxx-xxxxx.

I would like to get (xx)xxxx-xxxx when I type the 10th number, and (xx)xxxxx-xxxx when I type the 11th. Is it posible?

like image 315
JHispa Avatar asked Jul 24 '12 15:07

JHispa


People also ask

How use jQuery masked input plugin?

First, include the jQuery and masked input javascript files. Next, call the mask function for those items you wish to have masked. jQuery(function($){ $("#date"). mask("99/99/9999"); $("#phone").

What is masking in jQuery?

jQuery mask is a jQuery plugin that helps in putting on a mask on the basic HTML input fields and other elements. If the developer wants the input field to take inputs in a certain format only, then they can use the jQuery mask plugin for it.

What is data Inputmask?

In computer programming, an input mask refers to a string expression, defined by a developer, that constrains user input. It can be said to be a template, or set format that entered data must conform to, ensuring data integrity by preventing transcription errors.

How to mask phone numbers in standard input fields using jQuery?

This is a lightweight (less than 2kb) and easy-to-use jQuery input mask plugin to mask and vali date US (or international) phone numbers in standard input fields. 1. Download, unzip the plugin and then insert the JavaScript jquery-input-mask-phone-number.js after jQuery JavaScript library. 2. Create a normal text field for the telephone input. 3.

How to use jQuery input mask plugin?

How to start using jQuery? More in this category... This is a lightweight (less than 2kb) and easy-to-use jQuery input mask plugin to mask and vali date US (or international) phone numbers in standard input fields. 1. Download, unzip the plugin and then insert the JavaScript jquery-input-mask-phone-number.js after jQuery JavaScript library.

Is there a phone number mask in JSFiddle?

Here is a jQuery phone number mask. No plugin required. Format can be adjusted to your needs. Updated JSFiddle. <form id="example-form" name="my-form"> <input id="phone-number" name="phone-number" type="text" placeholder=" (XXX) XXX-XXXX"> </form>

What characters are used for masking in MS Access?

Here the mask uses the default A and S. With that, we have the new alphabet character Y for masking. for which the user has to input digits into the input elements. This way, you can customize the existing ones as well as add new ones as per your requirements.


3 Answers

Try this - http://jsfiddle.net/dKRGE/3/

$("#phone").mask("(99) 9999?9-9999");

$("#phone").on("blur", function() {
    var last = $(this).val().substr( $(this).val().indexOf("-") + 1 );

    if( last.length == 3 ) {
        var move = $(this).val().substr( $(this).val().indexOf("-") - 1, 1 );
        var lastfour = move + last;
        var first = $(this).val().substr( 0, 9 );

        $(this).val( first + '-' + lastfour );
    }
});
like image 130
Zoltan Toth Avatar answered Oct 18 '22 21:10

Zoltan Toth


Here is a jQuery phone number mask. No plugin required. Format can be adjusted to your needs.

Updated JSFiddle.

HTML

<form id="example-form" name="my-form">
    <input id="phone-number" name="phone-number" type="text" placeholder="(XXX) XXX-XXXX">
</form>

JavaScript

$('#phone-number', '#example-form')

.keydown(function (e) {
    var key = e.which || e.charCode || e.keyCode || 0;
    $phone = $(this);

    // Don't let them remove the starting '('
    if ($phone.val().length === 1 && (key === 8 || key === 46)) {
        $phone.val('('); 
        return false;
    } 
    // Reset if they highlight and type over first char.
    else if ($phone.val().charAt(0) !== '(') {
        $phone.val('('+$phone.val()); 
    }

    // Auto-format- do not expose the mask as the user begins to type
    if (key !== 8 && key !== 9) {
        if ($phone.val().length === 4) {
            $phone.val($phone.val() + ')');
        }
        if ($phone.val().length === 5) {
            $phone.val($phone.val() + ' ');
        }           
        if ($phone.val().length === 9) {
            $phone.val($phone.val() + '-');
        }
    }

    // Allow numeric (and tab, backspace, delete) keys only
    return (key == 8 || 
            key == 9 ||
            key == 46 ||
            (key >= 48 && key <= 57) ||
            (key >= 96 && key <= 105)); 
})

.bind('focus click', function () {
    $phone = $(this);

    if ($phone.val().length === 0) {
        $phone.val('(');
    }
    else {
        var val = $phone.val();
        $phone.val('').val(val); // Ensure cursor remains at the end
    }
})

.blur(function () {
    $phone = $(this);

    if ($phone.val() === '(') {
        $phone.val('');
    }
});
like image 23
Justin Avatar answered Oct 18 '22 23:10

Justin


Actually the correct answer is on http://jsfiddle.net/HDakN/

Zoltan answer will allow user entry "(99) 9999" and then leave the field incomplete

$("#phone").mask("(99) 9999-9999?9");


$("#phone").on("blur", function() {
    var last = $(this).val().substr( $(this).val().indexOf("-") + 1 );

    if( last.length == 5 ) {
        var move = $(this).val().substr( $(this).val().indexOf("-") + 1, 1 );

        var lastfour = last.substr(1,4);

        var first = $(this).val().substr( 0, 9 );

        $(this).val( first + move + '-' + lastfour );
    }
});​
like image 4
PH. Avatar answered Oct 18 '22 23:10

PH.