Mask the input field for fixed format- Phone numbers

511
Views
4
Answers

I need the phone number input field to be in a fixed formatting. How do I mask the input field?

edit | flag
Gokul A
Asked on: Jun 01, 2012 at 12:20AM

4 Answers

138
1
138

This Masked input Plugin will help you Masked Input Plugin

edit | flag
William Patrick
Answered on: Jun 01, 2012 at 12:22AM
139
3
139

I found the validation doesn't go well with the Masked input Plugin. So I came up with a custom code. I just call the function on document.ready() function.

Javascript:

// Format phone number
// Format : "(123) 456-7890"

var zChar = new Array(' ', '(', ')', '-', '.');
var maxphonelength = 14;
var phonevalue1;
var phonevalue2;
var cursorposition;
var Phonenumberformat={};

$
(document).on("keydown", '.phonefield', function (event) {
   
Phonenumberformat.eventdown(this, event.originalEvent);
});

$
(document).on("keyup", '.phonefield', function (event) {
   
Phonenumberformat.eventup(this, event.originalEvent);
});

Phonenumberformat.ParseForNumber1 = function (object) { phonevalue1 = Phonenumberformat.ParseChar(object.value, zChar); };
Phonenumberformat.ParseForNumber2 = function (object) { phonevalue2 = Phonenumberformat.ParseChar(object.value, zChar); };
Phonenumberformat.eventup= function (object, e) {
   
if (e) {
        e
= e
   
} else {
        e
= window.event
   
}
   
if (e.which) {
       
var keycode = e.which
   
} else {
       
var keycode = e.keyCode
   
}

   
Phonenumberformat.ParseForNumber1(object);

   
if (keycode >= 48) {
       
Phonenumberformat.ValidatePhone(object);
   
}
};
Phonenumberformat.eventdown= function (object, e) {
   
var evr = object;
   
if (e) {
        e
= e
   
} else {
        e
= window.event
   
}
   
if (e.which) {
       
var keycode = e.which
   
} else {
       
var keycode = e.keyCode
   
}
   
Phonenumberformat.ParseForNumber2(object);
};
Phonenumberformat.GetCursorPosition = function () {
   
var t1 = phonevalue1;
   
var t2 = phonevalue2;
   
var bool = false;
   
for (i = 0; i < t1.length; i++) {
       
if (t1.substring(i, 1) != t2.substring(i, 1)) {
           
if (!bool) {
                cursorposition
= i;
                window
.status = cursorposition;
               
bool = true;
           
}
       
}
   
}
};
Phonenumberformat.ValidatePhone = function (object) {
   
var p = phonevalue1;

    p
= p.replace(/[^\d]*/gi, "");

   
if (p.length < 3) {
       
object.value = p
   
} else if (p.length == 3) {
        pp
= p;
        d4
= p.indexOf('(')
        d5
= p.indexOf(')')
       
if (d4 == -1) {
            pp
= "(" + pp;
       
}
       
if (d5 == -1) {
            pp
= pp + ")";
       
}
       
object.value = pp;
   
} else if (p.length > 3 && p.length < 7) {
        p
= "(" + p;
        l30
= p.length;
        p30
= p.substring(0, 4);
        p30
= p30 + ") "

        p31
= p.substring(4, l30);
        pp
= p30 + p31;

       
object.value = pp;

   
} else if (p.length >= 7) {
        p
= "(" + p;
        l30
= p.length;
        p30
= p.substring(0, 4);
        p30
= p30 + ") "

        p31
= p.substring(4, l30);
        pp
= p30 + p31;

        l40
= pp.length;
        p40
= pp.substring(0, 9);
        p40
= p40 + "-"

        p41
= pp.substring(9, l40);
        ppp
= p40 + p41;

       
object.value = ppp.substring(0, maxphonelength);
   
}

   
Phonenumberformat.GetCursorPosition();

   
if (cursorposition >= 0) {
       
if (cursorposition == 0) {
            cursorposition
= 2
       
} else if (cursorposition <= 2) {
            cursorposition
= cursorposition + 1
       
} else if (cursorposition  -1 && e2 > -1) {
               
if (e2 - e1 == 4) {
                    cursorposition
= cursorposition - 1
               
}
           
}
       
} else if (cursorposition == 9) {
            cursorposition
= cursorposition + 4
       
} else if (cursorposition < 11) {
            cursorposition
= cursorposition + 3
       
} else if (cursorposition == 11) {
            cursorposition
= cursorposition + 1
       
} else if (cursorposition == 12) {
            cursorposition
= cursorposition + 1
       
} else if (cursorposition >= 13) {
            cursorposition
= cursorposition
       
}

       
var txtRange = object.createTextRange();
        txtRange
.moveStart("character", cursorposition);
        txtRange
.moveEnd("character", cursorposition - object.value.length);
        txtRange
.select();
   
}

}

Phonenumberformat.ParseChar = function (sStr, sChar) {
   
if (sChar.length == null) {
        zChar
= new Array(sChar);
   
}
   
else zChar = sChar;

   
for (i = 0; i < zChar.length; i++) {
        sNewStr
= "";

       
var iStart = 0;
       
var iEnd = sStr.indexOf(sChar[i]);

       
while (iEnd != -1) {
            sNewStr
+= sStr.substring(iStart, iEnd);
            iStart
= iEnd + 1;
            iEnd
= sStr.indexOf(sChar[i], iStart);
       
}
        sNewStr
+= sStr.substring(sStr.lastIndexOf(sChar[i]) + 1, sStr.length);

        sStr
= sNewStr;
   
}

   
return sNewStr;
};

And the HTML

input class="phonefield" type="text" id="phonenumber"/>

or you can call the function during the key up or key down event.

input type="text" name="phonenumber"
onkeydown
="javascript:Phonenumberformat.eventdown(this,event);"
onkeyup
="javascript:Phonenumberformat.eventup(this,event);" />
edit | flag
Gokul A
Answered on: Jun 01, 2012 at 12:38AM
141
2
141

You can also try a find all phone fields using a common class and replace then with the formatted one
1-(123) 456-7890
or
(123) 456-7890

input type="text" class="phonefield"/>

JQuery

$(document).on("change", '.phonefield', function (event) {

       
var text = $(this).val();
   
if (text != "" && text != null) {
       
var onlyNumbers = text.replace(/\D/g, "");

       
if (text.length  11) {
               
var PhoneFormated = onlyNumbers.substring(0, 11).replace(/(\d{1})(\d{3})(\d{3})(\d{4})/, "$1 ($2) $3-$4");
                $
(this).val(PhoneFormated);
           
}
           
else {
                $
(this).val(onlyNumbers);

           
}

       
}
       
else if (text.length > 15) {
           
if (onlyNumbers.length > 11) {
               
var PhoneFormated = onlyNumbers.substring(0, 11).replace(/(\d{1})(\d{3})(\d{3})(\d{4})/, "$1 ($2) $3-$4");
                $
(this).val(PhoneFormated);
           
}
           
else {
                $
(this).val(''); alert('Please enter numbers only');
           
}
       
}
   
}
   
//return text;
});
edit | flag
Gokul A
Answered on: Jul 21, 2012 at 8:08PM
170
0
170

Thanks

edit | flag
Bac gs
Answered on: Oct 06, 2013 at 9:45PM

Post your Answer

Search

Welcome to Ask Amoeba!
This is 100% free and interactive site for sharing professional Questions and Answers, Opensource projects, Interview questions.
Learners, beginners, Experts stop and share your knowledge and ideas!

Browse Categories

Browse Tags