I have a textbox to get user input amount of money so I want a dot will always be added in front of the last 2 digits automatically as soon as user started to type in the textbox not after they finished typing but on the goFor exampleUser moved the mouse to the textbox and typed 1 gt textbox is automatically displaying as 001User typed 12 gt textbox displaying as 012User typed 123 gt textbox displaying as 123User typed 1234 gt textbox displaying as 1224User typed

Please refer this HTML codelthtml xmlns34httpwwww3org1999xhtml34gtlthead runat34server34gt lttitlegtlttitlegt ltscript type34textjavascript34gt function AddCommatext switch textvaluelength case 1 documentgetElementById34lttxtNumberClientID gt34value 340034 textvalue break default var data textvaluereplace3434 3434 var first datasubstring0 datalength 2 var second datasubstringdatalength 2 var temp Mathabsfirst 3434 second documentgetElementById34lttxtNumberClientID gt34value temp ltscriptgtltheadgtltbodygt ltform id34form134 runat34server34gt

Automatically shift decimal point to two decimal places in TextBox using JavaScript

julyzerg

SOLVED CLOSED ACTIVE ANSWERED
User: julyzerg
Posted: on Nov 05, 2014 03:33 AM
Forum: JavaScript
Answer: 1
Views: 14212

I have a textbox to get user input amount of money, so I want a dot (.) will always be added in front of the last 2 digits automatically as soon as user started to type in the textbox (not after they finished typing but on the go).

For example:

User moved the mouse to the textbox and typed '1' => textbox is automatically displaying as 0.01
User typed '12' => textbox displaying as 0.12
User typed '123' => textbox displaying as 1.23
User typed '1234' => textbox displaying as 12.24
User typed '123456' => textbox displaying as 1234.56 and so on...

So the textbox will always be 2 decimal places. My JS is really lacking now (I am trying to improve it) I know the logic is really not hard but I am having difficulties with JS syntax and functions. I also tried the Ajax toolkit Masked Edit Extender but there is a bug with ASP.NET 4.5 (where the mask not go away if textbox lost focus)

My existing code (helped by Azim) only add a dot and 00 at the end of the number and after people move the mouse away (textbox lost focus), I really need help here. (I already have a JS filter so that user can only type in digits, nothing else allowed)

<!-- BEGIN Add dot (.) to the end of amount -->
<script type="text/javascript">
    function AppendDot(textbox) {
        var text = textbox.value;
        document.getElementById("<%=txtAmount.ClientID %>").value = "";
        if (text.indexOf(".") == -1) {
            document.getElementById("<%=txtAmount.ClientID %>").value = text + ".00";
        }
        else {
            document.getElementById("<%=txtAmount.ClientID %>").value = text;
        }
    }
</script>
<!-- END Add dot (.) to the end of amount -->

<asp:TextBox ID="txtAmount" runat="server" MaxLength="12" onchange="AppendDot(this);" />

Download FREE API for Word, Excel and PDF in ASP.Net

Azim

0 1

Reply
ANSWER
User: Azim
Replied: on Nov 05, 2014 03:40 AM
Report

Please refer this HTML code

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript">
        function AddComma(text) {            
            switch (text.value.length) {
                case 1:
                    document.getElementById("<%=txtNumber.ClientID %>").value = "0.0" + text.value;
                    break;
                default:                    
                    var data = text.value.replace(".", "");
                    var first = data.substring(0, (data.length - 2));
                    var second = data.substring(data.length - 2);
                    var temp = Math.abs(first) + "." + second;
                    document.getElementById("<%=txtNumber.ClientID %>").value = temp;
            }
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        
        <asp:TextBox ID="txtNumber" Text="" runat="server" onkeyup="AddComma(this);" />
    </div>
    </form>
</body>
</html>

HTML with Demo

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        body
        {
            font-family: Arial;
            font-size: 10pt;
        }
    </style>
    <script type="text/javascript">
        function AddComma(text) {
            switch (text.value.length) {
                case 1:
                    document.getElementById("txtNumber").value = "0.0" + text.value;
                    break;
                default:
                    var data = text.value.replace(".", "");
                    var first = data.substring(0, (data.length - 2));
                    var second = data.substring(data.length - 2);
                    var temp = Math.abs(first) + "." + second;
                    document.getElementById("txtNumber").value = temp;
            }
        }
    </script>
</head>
<body>
    <input id="txtNumber" type="text" name="name" onkeyup="AddComma(this);" />
</body>
</html>

Demo

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

Automatically shift decimal point to two decimal places in TextBox using JavaScript

Company

Explore

Follow us

Contact Us