Formatting The Phone Number For Multiple Asp:textbox In Javascript

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 w

Solution 1:

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 validationvar zChar = newArray(' ', '(', ')', '-', '.');
    var maxphonelength = 13;
    var phonevalue1;
    var phonevalue2;
    var cursorposition;

    functionParseForNumber1(object) {
        phonevalue1 = ParseChar(object.value, zChar);
    }
    functionParseForNumber2(object) {
        phonevalue2 = ParseChar(object.value, zChar);
    }

    functionbackspacerUP(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)
        }
    }

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

    functionGetCursorPosition() {

        var t1 = phonevalue1;
        var t2 = phonevalue2;
        varbool = falsefor (i = 0; i < t1.length; i++) {
            if (t1.substring(i, 1) != t2.substring(i, 1)) {
                if (!bool) {
                    cursorposition = i
                    bool = true
                }
            }
        }
    }

    functionValidatePhone(object) {

        var p = phonevalue1

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

        if (p.length < 3) {
            object.value = p
        } elseif (p.length == 3) {
            pp = p;
            d4 = p.indexOf('(')
            d5 = p.indexOf(')')
            if (d4 == -1) {
                pp = "(" + pp;
            }
            if (d5 == -1) {
                pp = pp + ")";
            }
            object.value = pp;
        } elseif (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;

        } elseif (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
            } elseif (cursorposition <= 2) {
                cursorposition = cursorposition + 1
            } elseif (cursorposition <= 5) {
                cursorposition = cursorposition + 2
            } elseif (cursorposition == 6) {
                cursorposition = cursorposition + 2
            } elseif (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
                    }
                }
            } elseif (cursorposition < 11) {
                cursorposition = cursorposition + 3
            } elseif (cursorposition == 11) {
                cursorposition = cursorposition + 1
            } elseif (cursorposition >= 12) {
                cursorposition = cursorposition
            }

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

    }

    functionParseChar(sStr, sChar) {
        if (sChar.length == null) {
            zChar = newArray(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:TextBoxMaxLength="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

functionmarkSpace(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 :)