locked
auto group numbers for currency when typing in textbox by javascript RRS feed

  • Question

  • User-475949336 posted

    dear all

    I'm using javascript for auto group numbers for currency when typing in textbox by javascript: it only accept numbers and left, right, home, end, backspace, delete key

    function isNumberKey(i)
    {
      if (i.value.length > 0)
      {
    	
      var notNumber=new RegExp("[^0-9]","g");			
      if(i.value.match(notNumber))
      { 
        i.value=i.value.replace(notNumber,""); // Only number ===> OK 
        i.value = i.value.replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,"); // group for currency  ===> NOT OK 
      }
    }
    }
    
    AND IN TEXTBOX CALL:
    
    <asp:TextBox ID="Money" onkeyup="isNumberKey(this);" type="tel" runat="server" ></asp:TextBox>

    But when Typing numbers it do not group for currency. Pls help me, I must use the javascript function and onkeyup event, no use another solution.

    Friday, May 8, 2020 6:03 AM

Answers

  • User288213138 posted

    Hi test0101,

    I read all your code, then wrote a demo based on your code, but it is still work.

    This is my tested code:

    <script>
            function isNumberKey(i) {
                if (i.value.length > 0) {
                    var notNumber = /[0-9]/g;
                    if (i.value.match(notNumber)) {
                        i.value = i.value.replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,");
                    }
                }
            }
        </script>
    
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                    <ContentTemplate>
                        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
                        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
                            <Columns>
                                <asp:TemplateField HeaderText="Salary1">
                                    <ItemTemplate>
                                        <asp:TextBox ID="txtSalary1" onkeyup="isNumberKey(this);" Text='<%# Eval("MySalary1") %>' Width="80px" runat="server"></asp:TextBox>
                                        <ajaxToolkit:FilteredTextBoxExtender ID="FilteredTextBoxExtender1" runat="server" TargetControlID="txtSalary1" ValidChars="1234567890," />
                                    </ItemTemplate>
                                </asp:TemplateField>
    
                                <asp:TemplateField HeaderText="Salary2">
                                    <ItemTemplate>
                                        <asp:TextBox ID="txtSalary2" onkeyup="isNumberKey(this);" Text='<%# Eval("MySalary2") %>' Width="80px" runat="server"></asp:TextBox>
                                        <ajaxToolkit:FilteredTextBoxExtender ID="FilteredTextBoxExtender2" runat="server" TargetControlID="txtSalary2" ValidChars="1234567890," />
                                    </ItemTemplate>
                                </asp:TemplateField>
                            </Columns>
                        </asp:GridView>
                    </ContentTemplate>
                </asp:UpdatePanel>

    Have you used F12 to check if there is an error message in the console?  and you can also set a breakpoint to debug whether your js method is triggered.

    Best regards,

    Sam

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, May 13, 2020 9:38 AM

All replies

  • User288213138 posted

    Hi test0101,

    But when Typing numbers it do not group for currency. Pls help me, I must use the javascript function and onkeyup event, no use another solution.

    You can try below code:

     function isNumberKey(i) {
                if (i.value.length > 0) {
                    var notNumber = /[0-9]/g;
                    if (i.value.match(notNumber)) { 
                        i.value = i.value.replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,");                     
                    }
                }
            }

    The result:

    Best regards,

    Sam

    Friday, May 8, 2020 8:54 AM
  • User-475949336 posted

    hi samwu

    I tested but it's no good: It can input letter..., and group wrong (if type: 333333 -> 3,3,3,333

    image at: https: //pasteboard.co/J7oS7dn.gif

    Friday, May 8, 2020 9:36 AM
  • User288213138 posted

    Hi test0101,

    I tested but it's no good: It can input letter

    You can use RegularExpressionValidator control to make textbox only input numbers.

     <asp:TextBox ID="Money" onkeyup="isNumberKey(this);" type="tel" runat="server"></asp:TextBox>
     <asp:RegularExpressionValidator ID="RegularExpressionValidator1" ControlToValidate="Money" runat="server" ErrorMessage="Only Numbers allowed" ValidationExpression="\d+"></asp:RegularExpressionValidator>

    and group wrong (if type: 333333 -> 3,3,3,333

    When you enter 333333, the key cannot be released. The keyup event is sent to an element when the user releases a key on the keyboard. 

    Best regards,

    Sam

    Friday, May 8, 2020 9:58 AM
  • User-475949336 posted

    hi Samwu

    I tested but same as before, still input letter and wrong group currency

    Friday, May 8, 2020 10:14 AM
  • User288213138 posted

    Hi test0101,

    I tested but same as before, still input letter and wrong group currency

    If you want to allowing only certain characters in a TextBox, you can try to use ajax control FilteredTextBoxExtender.

    <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
    <asp:TextBox ID="Money" onkeyup="isNumberKey(this);" runat="server"></asp:TextBox>
    <ajaxToolkit:FilteredTextBoxExtender ID="FilteredTextBoxExtender1" runat="server" TargetControlID="Money" ValidChars="1234567890," />

    wrong group currency

    I have already answered in the above post. The keyup event is sent to an element when the user releases a key on the keyboard. 

    So when you type, you can only keep pressing the keyboard, not release.

    Best regards,

    Sam

    Monday, May 11, 2020 2:33 AM
  • User-475949336 posted

    hi Sam

    I tried with two your solutions, but not effect (user can input letter and group like as 3,3,333,3).

    I have alot of textbox like money, so i want buld one function and call as onkeyup="isNumberKey(this);".

    My function is activities very good, exception left, right, home, end key are no effect.

    I want allow user typing only number AND left, right, home, end key.

    this is my function:

    function isNumberKey(i)
    {
    if (i.value.length > 0)
    {
    i.value = i.value.replace(/[^\d]+/g, ''); // Only number
    i.value = i.value.replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,"); // group for currency

    }
    }

    Tuesday, May 12, 2020 2:22 AM
  • User288213138 posted

    Hi test0101,

    I tried with two your solutions, but not effect (user can input letter and group like as 3,3,333,3).

    This is the test result of my last answer, does this meet your needs?

    The ValidChars property in the FilteredTextBoxExtender control will let you set the characters you need to type.

    Best regards,

    Sam

    Tuesday, May 12, 2020 2:53 AM
  • User-475949336 posted

    hi Sam

    yes, that i need, but if apply on my app it does'nt activities as I hope.

    I need you help me to edit the my function in order to accept left, right, home. end key

    function isNumberKey(i)
    {
    if (i.value.length > 0)
    {
    i.value = i.value.replace(/[^\d]+/g, ''); // Only number
    i.value = i.value.replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,"); // group for currency

    }
    }

    Tuesday, May 12, 2020 3:47 AM
  • User288213138 posted

    Hi test0101,

    I need you help me to edit the my function in order to accept left, right, home. end key

    Do you mean you want to use the left, right, home, end keys in the TextBox?

    If so, my code can still work.

    Best regards,

    Sam

    Tuesday, May 12, 2020 6:10 AM
  • User-475949336 posted

    Hi Sam,

    I see your code is efffect, but I don't know why it can't in my web

    Tuesday, May 12, 2020 7:34 AM
  • User288213138 posted

    Hi test0101,

    I see your code is efffect, but I don't know why it can't in my web

    Use F12 to check whether there is an error message in the console.

    Please show me your complete code.

    Best regards,

    Sam

    Tuesday, May 12, 2020 7:38 AM
  • User-475949336 posted

    Yes Sam.

    This is my code: https://forums.asp.net/post/6301104.aspx

    In that code, already:

    <asp:ScriptManager id="toolScriptManageer1" runat="server" EnablePartialRendering="false">
    </asp:ScriptManager> 

    so, I only updated your help with:

    <asp:TemplateField HeaderText="Salary1" >
    <ItemTemplate>
    <asp:textbox ID="txtSalary1" onkeyup="isNumberKey(this);" Text='<%# Eval("MySalary1") %>' Width="80px" runat="server"></asp:textbox>

    <ajaxToolkit:FilteredTextBoxExtender ID="FilteredTextBoxExtender1" runat="server" TargetControlID="txtSalary1" ValidChars="1234567890," />

    </ItemTemplate>
    </asp:TemplateField>

    <asp:TemplateField HeaderText="Salary2" >
    <ItemTemplate>
    <asp:textbox ID="txtSalary2" onkeyup="isNumberKey(this);" Text='<%# Eval("MySalary2") %>' Width="80px" runat="server"></asp:textbox>

    <ajaxToolkit:FilteredTextBoxExtender ID="FilteredTextBoxExtender2" runat="server" TargetControlID="txtSalary2" ValidChars="1234567890," />
    </ItemTemplate>
    </asp:TemplateField>

    Tuesday, May 12, 2020 8:18 AM
  • User288213138 posted

    Hi test0101,

    I read all your code, then wrote a demo based on your code, but it is still work.

    This is my tested code:

    <script>
            function isNumberKey(i) {
                if (i.value.length > 0) {
                    var notNumber = /[0-9]/g;
                    if (i.value.match(notNumber)) {
                        i.value = i.value.replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,");
                    }
                }
            }
        </script>
    
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                    <ContentTemplate>
                        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
                        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
                            <Columns>
                                <asp:TemplateField HeaderText="Salary1">
                                    <ItemTemplate>
                                        <asp:TextBox ID="txtSalary1" onkeyup="isNumberKey(this);" Text='<%# Eval("MySalary1") %>' Width="80px" runat="server"></asp:TextBox>
                                        <ajaxToolkit:FilteredTextBoxExtender ID="FilteredTextBoxExtender1" runat="server" TargetControlID="txtSalary1" ValidChars="1234567890," />
                                    </ItemTemplate>
                                </asp:TemplateField>
    
                                <asp:TemplateField HeaderText="Salary2">
                                    <ItemTemplate>
                                        <asp:TextBox ID="txtSalary2" onkeyup="isNumberKey(this);" Text='<%# Eval("MySalary2") %>' Width="80px" runat="server"></asp:TextBox>
                                        <ajaxToolkit:FilteredTextBoxExtender ID="FilteredTextBoxExtender2" runat="server" TargetControlID="txtSalary2" ValidChars="1234567890," />
                                    </ItemTemplate>
                                </asp:TemplateField>
                            </Columns>
                        </asp:GridView>
                    </ContentTemplate>
                </asp:UpdatePanel>

    Have you used F12 to check if there is an error message in the console?  and you can also set a breakpoint to debug whether your js method is triggered.

    Best regards,

    Sam

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, May 13, 2020 9:38 AM
  • User-475949336 posted

    Hi Sam

    I will review all mycode to detect why it'not apply your help code.

    Wednesday, May 13, 2020 9:43 AM