Phone mask with jQuery and Masked Input Plugin

Question

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

There are 2 possible formats:

1. (XX)XXXX-XXXX
2. (

Answer 1

If you don't want to show your mask as placeholder you should use jQuery Mask Plugin.

The cleanest way:

var options =  {
    onKeyPress: function(phone, e, field, options) {
        var masks = ['(00) 0000-00000', '(00) 00000-0000'];
        var mask = (phone.length>14) ? masks[1] : masks[0];
        $('.phone-input').mask(mask, options);
    }
};

$('.phone-input').mask('(00) 0000-00000', options);

Answer 2

Yes use this

$("#phone").inputmask({"mask": "(99) 9999 - 9999"});

Link here

Answer 3

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 );
    }
});​

Answer 4

You need a jQuery plugin for the mask works as well.

-- HTML --

<input type="text" id="phone" placeholder="(99) 9999-9999">
<input type="text" id="telf1" placeholder="(99) 9999*-9999">
<input type="text" id="telf2" placeholder="(99) 9999?-9999">

-- JAVASCRIPT --

<script src="https://raw.githubusercontent.com/igorescobar/jQuery-Mask-Plugin/master/src/jquery.mask.js"></script>
<script>
$(document).ready(function($){
    $("#phone").mask("(99) 9999-9999"); 
    $("#telf1").mask("(99) 9999*-9999");    
    $("#telf2").mask("(99) 9999?-9999"); 
});
</script>

Answer 5

$('.phone').focus(function(e) {
    // add mask
    $('.phone')
        .mask("(99) 99999999?9")
        .focusin(function(event)
        {
            $(this).unmask();
            $(this).mask("(99) 99999999?9");
        })
        .focusout(function(event)
        {
            var phone, element;
            element = $(this);
            phone = element.val().replace(/\D/g, '');
            element.unmask();

            if (phone.length > 10) {
                element.mask("(99) 99999-999?9");
            } else {
                element.mask("(99) 9999-9999?9");
            }
        }
    );
});

Answer 6

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 );
    }
});