Implementation of thousand separator for a Textbox

I need a JavaScript code to implement the thousand separator for a Textbox on KeyUp event.

Please help.

Re: Implementation of thousand separator for a Textbox

I think that with the MaskedEdit extender of the Ajax Control Toolkit is enough for what you need.

Check this URL: http://www.asp.net/ajax/ajaxcontroltoolkit/Samples/MaskedEdit/MaskedEdit.aspx

Hope this helps

Re: Implementation of thousand separator for a Textbox

Afshin_Zavar

I need a JavaScript code to implement the thousand separator for a Textbox on KeyUp event.

Please help.

Hi,

I hope links bottom can guide you

http://www.webmasterworld.com/forum91/8.htm

http://chiragrdarji.wordpress.com/2007/05/28/thousand-separator-function-for-java-script/

http://lists.evolt.org/pipermail/javascript/2004-June/007396.html

Re: Implementation of thousand separator for a Textbox

Thanks Emad but I want a piece of code that can do this operation on KeyPress event.

As you know, the code should remove all commas and then re-add them.

Re: Implementation of thousand separator for a Textbox

hi Afshin Zavar,

then how do you know when you need to re-add the comma on your text when KeyPress event

i recommend you implement thousand separator on blur() event

please let me know if I misunderstand your requirement, thanks~

Re: Implementation of thousand separator for a Textbox

I'm trying to get the content of TextBox... What's wrong with it, please?

<head runat="server">
    <title></title>


    <script type="text/javascript">
        //Adds thousand seprator
        function split(TextBox) {
            alert(TextBox.text);
        }
        //Removes thousand seprator
        function merge(textbox) {
        }
    </script>


</head>
<body>
    <form id="form1" runat="server">
    <asp:TextBox ID="txt" runat="server"
     onkeypress="split('<%=txt.clientID%>');"
     onblur="merge('<%=txt.clientID%>');">
    </asp:TextBox>
    </form>
</body>

Re: Implementation of thousand separator for a Textbox

Hi,

Follow this :

<%@ Page Language="C#" %>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<script runat="server">


</script>


<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <script type="text/javascript">
        //Adds thousand seprator
        function split(TextBox) {
            alert(TextBox.value);
        }
        //Removes thousand seprator
        function merge(textbox) {
        }
    </script>


</head>
<body>
    <form id="form1" runat="server">
    <asp:TextBox ID="txt" runat="server"
     onkeyup="split(this);"
     onblur="merge(this);">
    </asp:TextBox>
    </form>
</body>
</html>

I changed onkeypress to onkeyup. I think it's more properly

Re: Implementation of thousand separator for a Textbox

now, i revised the code and here is the result:

<script type="text/javascript">


        function strrev(str) {
            if (!str) return '';
            var revstr = '';
            for (i = str.length - 1; i >= 0; i--)
                revstr += str.charAt(i)
            return revstr;
        }


        function ReplaceAll(Source, stringToFind, stringToReplace) {
            var temp = Source;
            var index = temp.indexOf(stringToFind);
            while (index != -1) {
                temp = temp.replace(stringToFind, stringToReplace);
                index = temp.indexOf(stringToFind);
            }
            return temp;
        }
        function AddAndRemoveSeparator(txtbox) {
            var i = 0, Odd = 0; rev = '', result = '';
            txtbox.value = ReplaceAll(txtbox.value, ',', ''); //remove prevoius separators;
          

            if (txtbox.value.length <= 3) return;
          

            rev = strrev(txtbox.value); //reverse string;
            while (i < rev.length) {
                result += rev.substr(i, 1);
                Odd++;
                if (Odd % 3 == 0) { //add separator after 3 digits;
                    result += ',';
                    odd = 0;
                }
                i++;
            }
            result = strrev(result);
//            if (result.charAt(1) == ',') {
//                result = result.substr(2, result.length-1)
//            }
            txtbox.value = result;
            

        }
    </script>


</head>
<body onload="document.form1.TextBox1.focus();">
    <form id="form1" runat="server">
    <asp:Label ID="Label3" runat="server" Text="Number:"></asp:Label>
     <asp:TextBox ID="TextBox1" runat="server"
        onkeyup="AddAndRemoveSeparator(this);"
        Text="12345">
    </asp:TextBox>
    </form>

There is a bug that I couldn't fix. sometimes the ',' is at the begining of string and i couldn't get rid of it.

Does anybody have any better code or algorithm ?

Re: Implementation of thousand separator for a Textbox

Afshin_Zavar

There is a bug that I couldn't fix. sometimes the ',' is at the begining of string and i couldn't get rid of it.

Hi,

in what state ',' is the begininig ?

Re: Implementation of thousand separator for a Textbox

For example when the length of number is 6 (like:123456)

Re: Implementation of thousand separator for a Textbox

Hi,

test this :

function strrev(str) {
            if (!str) return '';
            var revstr = '';
            for (i = str.length - 1; i >= 0; i--)
                revstr += str.charAt(i)
            return revstr;
        }


        function ReplaceAll(Source, stringToFind, stringToReplace) {
            var temp = Source;
            var index = temp.indexOf(stringToFind);
            while (index != -1) {
                temp = temp.replace(stringToFind, stringToReplace);
                index = temp.indexOf(stringToFind);
            }
            return temp;
        }
        function AddAndRemoveSeparator(txtbox) {
            var i = 0, Odd = 0; rev = '', result = '';
            txtbox.value = ReplaceAll(txtbox.value, ',', ''); //remove prevoius separators;
          

            if (txtbox.value.length <= 3) return;
          

            rev = strrev(txtbox.value); //reverse string;
            while (i < rev.length) {
                result += rev.substr(i, 1);
                Odd++;
                if ((Odd == 3) && (i != rev.length-1)) { //add separator after 3 digits;
                    result += ',';
                    Odd = 0;
                }
                i++;
            }
            result = strrev(result);
//            if (result.charAt(1) == ',') {
//                result = result.substr(2, result.length-1)
//            }
            txtbox.value = result;
            

        }

I change (Odd % 3 == 0) in if clause. now when the length of characters is 6 for example (123456) result is 123,456

Re: Implementation of thousand separator for a Textbox

Thanks very much.This has really been helpful.