Formatting the phone number for multiple asp:TextBox in Javascript

Question

This might be very basic problem. I found the similar solution on Stack Overflow for formatting the phone number and I used it for asp:TextBox control, but I want this code to be work for multiple phone number textbox control rather than passing IDs directly. I have five different phone field and all those textbox are asp:TextBox. I want to call the same code from all those filed. (I am looking this solution in JavaScript only)

Here is my JS code:

/*Start of phone number formating */
    var n;
    var p;
    var p1;
    function format_phone() {
        p = p1.value
        if (p.length == 3) {
            pp = p;
            d4 = p.indexOf('(')
            d5 = p.indexOf(')')
            if (d4 == -1) {
                pp = "(" + pp;
            }
            if (d5 == -1) {
                pp = pp + ") ";
            }
            document.getElementById('<%=HomePhone.ClientID%>').value = "";
            document.getElementById('<%=HomePhone.ClientID%>').value = pp;
        }
        if (p.length > 3) {
            d1 = p.indexOf('(')
            d2 = p.indexOf(')')
            if (d2 == -1) {
                l30 = p.length;
                p30 = p.substring(0, 4);
                p30 = p30 + ") "
                p31 = p.substring(5, l30);
                pp = p30 + p31;
                document.getElementById('<%=HomePhone.ClientID%>').value = "";
                document.getElementById('<%=HomePhone.ClientID%>').value = pp;
            }
        }
        if (p.length > 7) {
            p11 = p.substring(d1 + 1, d2);
            if (p11.length > 4) {
                p12 = p11;
                l12 = p12.length;
                l15 = p.length
                p13 = p11.substring(0, 4);
                p14 = p11.substring(4, l12);
                p15 = p.substring(d2 + 1, l15);
                document.getElementById('<%=HomePhone.ClientID%>').value = "";
                pp = "(" + p13 + ") " + p14 + p15;
                document.getElementById('<%=HomePhone.ClientID%>').value = pp;
            }
            l16 = p.length;
            p16 = p.substring(d2 + 2, l16);
            l17 = p16.length;
            if (l17 > 3 && p16.indexOf('-') == -1) {
                p17 = p.substring(d2 + 1, d2 + 5);
                p18 = p.substring(d2 + 5, l16);
                p19 = p.substring(0, d2 + 1);
                pp = p19 + p17 + "-" + p18;
                document.getElementById('<%=HomePhone.ClientID%>').value = "";
                document.getElementById('<%=HomePhone.ClientID%>').value = pp;
            }
        }

        setTimeout(format_phone, 100)
    }
    function getIt(m) {
        n = m.name;
        p1 = m;
        format_phone()
    }
    /* End of phone number formating */

and asp:TextBox as

<asp:TextBox MaxLength="14" 
                            runat="server" ID="HomePhone"
                            placeholder="(xxx) xxx-xxxx"
                            onFocus="if(this.value==this.defaultValue)this.value='';" onclick="javascript:getIt(this)" 
                            onkeypress='return event.charCode >= 48 && event.charCode <= 57'/>

And I have other similar four textboxes for phone field and I want to use the same formatting logic for all those. What is the best way to use this or any alternative JavaScript code from multiple textbox. Any help would be highly appreciated.

I am still waiting for appropriate solutions of this problem :( — Babu, Aug 02 '17 at 23:52

Raj Baral · Accepted Answer · 2017-09-21T23:20:06.203

I don't remember where I found this solution but, it might help you out to format the phone fields:

<script type="text/javascript">
    //Phone validation
    var zChar = new Array(' ', '(', ')', '-', '.');
    var maxphonelength = 13;
    var phonevalue1;
    var phonevalue2;
    var cursorposition;

    function ParseForNumber1(object) {
        phonevalue1 = ParseChar(object.value, zChar);
    }
    function ParseForNumber2(object) {
        phonevalue2 = ParseChar(object.value, zChar);
    }

    function backspacerUP(object, e) {
        if (e) {
            e = e
        } else {
            e = window.event
        }
        if (e.which) {
            var keycode = e.which
        } else {
            var keycode = e.keyCode
        }

        ParseForNumber1(object)

        if (keycode >= 48) {
            ValidatePhone(object)
        }
    }

    function backspacerDOWN(object, e) {
        if (e) {
            e = e
        } else {
            e = window.event
        }
        if (e.which) {
            var keycode = e.which
        } else {
            var keycode = e.keyCode
        }
        ParseForNumber2(object)
    }

    function GetCursorPosition() {

        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
                    bool = true
                }
            }
        }
    }

    function ValidatePhone(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, 8);
            p40 = p40 + "-"

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

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

        GetCursorPosition()

        if (cursorposition >= 0) {
            if (cursorposition == 0) {
                cursorposition = 2
            } else if (cursorposition <= 2) {
                cursorposition = cursorposition + 1
            } else if (cursorposition <= 5) {
                cursorposition = cursorposition + 2
            } else if (cursorposition == 6) {
                cursorposition = cursorposition + 2
            } else if (cursorposition == 7) {
                cursorposition = cursorposition + 4
                e1 = object.value.indexOf(')')
                e2 = object.value.indexOf('-')
                if (e1 > -1 && e2 > -1) {
                    if (e2 - e1 == 4) {
                        cursorposition = cursorposition - 1
                    }
                }
            } else if (cursorposition < 11) {
                cursorposition = cursorposition + 3
            } else if (cursorposition == 11) {
                cursorposition = cursorposition + 1
            } else if (cursorposition >= 12) {
                cursorposition = cursorposition
            }

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

    }

    function ParseChar(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;
    }
</script>

And call this on your asp:TextBox as

<asp:TextBox MaxLength="14" 
             runat="server" ID="HomePhone"
             placeholder="(xxx) xxx-xxxx"
             onkeydown="javascript:backspacerDOWN(this,event);" 
             onkeyup="javascript:backspacerUP(this,event);" />

And If you want to insert space after ')' you can use the following trick

function markSpace(field) {
        if (field.value.includes(")")) {
            field.value = field.value.split(')').join(') ');
        }
        if (field.value.includes(") ")) {
            field.value = field.value.replace(/  +/g, ' ');

        }
    }

and call this as onblur="markSpace(this);" But I personally prefer using JQuery :)

This code will work but it gave me (123)425-0846 and doesn't have space after ')' I want the standard format like (123) 425-0846... — Babu, Aug 02 '17 at 23:30
check it out this post, https://stackoverflow.com/questions/45490755/auto-format-phone-number-in-javascript-not-jquery/45496164#45496164 — Raj Baral, Aug 04 '17 at 16:42

Formatting the phone number for multiple asp:TextBox in Javascript

1 Answers1

Linked