Question

我有一个文本框来获取用户输入的金额，所以我希望一旦用户开始在文本框中输入（而不是在完成后），就会自动在最后2位数字前面添加一个点（。）打字，但在旅途中）。

例如：

用户将鼠标移至文本框并键入＆＃39; 1＆＃39; =＆GT;文本框是自动显示为0.01
用户输入＆＃39; 12＆＃39; =＆GT;文本框显示为0.12
用户输入＆＃39; 123＆＃39; =＆GT;文本框显示为1.23
用户输入＆＃39; 1234＆＃39; =＆GT;文本框显示为12.24
用户输入＆＃39; 123456＆＃39; =＆GT;文本框显示为1234.56等等......

因此文本框将始终为2位小数。我的JS现在真的缺乏（我正在努力改进它）我知道逻辑并不难，但我在JS语法和函数方面遇到了困难。我还尝试了Ajax工具包Masked Edit Extender，但是ASP.NET 4.5存在一个错误（如果文本框失去焦点，掩码不会消失）

我现有的代码只在数字末尾添加一个点和00，人们移开鼠标后（文本框失去焦点），我真的需要帮助。（ 我已经有了JS过滤器功能，因此用户只能输入数字 ）

<!-- 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);" />

注意答案：下面的GibboK答案是一个很好的提示，并引导我解决方案，所以我选择它作为答案。我的方法基于GibboK的答案：

使用onkeyup代替onblur：<asp:TextBox ID="txtAmount" runat="server" MaxLength="12" onkeyup="process();" />
在＆＃39;进程（）＆＃39; JS功能，执行以下步骤：
首先：var amount = document.getElementById("<%=txtAmount.ClientID %>").value;
然后删除amount的点（例如0.01 =＆gt; 001,00.12 =＆gt; 0012,12.34 =＆gt; 1234等等）
删除amount前面的所有零0（例如001 =＆gt; 1,0012 =＆gt; 12,0102 =＆gt; 102,1234 =＆gt;仍为1234，依此类推）

在GibboK的回答中应用逻辑：

    var len = amount.length;
    var newAmount;

    if (len == 1) {
        newAmount = '0.0' + amount;
    } else if (len == 2) {
        newAmount = '0.' + amount;
    } else if (len == 3) {
        newAmount = amount.slice(0, 1) + '.' + amount.slice(-2);
    } else if (len == 4) {
        newAmount = amount.slice(0, 2) + '.' + amount.slice(-2);
    }
    else if (len > 4) {
        newAmount = amount.slice(0, amount.length - 2) + '.' + amount.slice(-2);
    }

    document.getElementById("<%=txtAmount.ClientID %>").value = newAmount;

Answer 1

以下代码可以帮助您了解逻辑。在这个例子中，我起诉onblur来处理数据。您可以考虑使用onkeyup和onkeydown。希望它有所帮助！

<html>
<head>

<script>
function process() {
    var elm = document.getElementsByName('amount')[0];
    var amount = elm.value,
        len = amount.length,
        newAmount;

        if(amount == '') {
            return;
        }
        if(isNaN(amount) == true) {
            alert('Value is not a valid number!');
            elm.value = '';
            return;
        }

    if(len == 1) {
        newAmount = '0.0' + amount;
    } else if(len == 2) {
        newAmount = '0.' + amount;
    } else if(len == 3) {
        newAmount = amount.slice(0,1) + '.' + amount.slice(-2);
    } else if(len == 4) {
        newAmount = amount.slice(0,2) + '.' + amount.slice(-2);
    }
    else if(len > 4) {
        newAmount = amount.slice(0, amount.length - 2) + '.' + amount.slice(-2);
    }

    elm.value = newAmount ? newAmount : '';

 /* 
    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...
 */

};

</script>
</head>
<body>

<form action="">
  Amount: <input type="text" name="amount" onblur="process();"><br>
</form>

 </body>
 </html>

在asp.net文本框中键入时自动添加点（。）（格式文本框到2个小数位）

1 个答案: