在asp.net文本框中键入时自动添加一个点(.)(将文本框格式设置为小数点后两位)

本文关键字：文本 格式 一个 设置 小数点 两位 net asp 添加 | 更新日期: 2023-09-27 18:29:15

我有一个文本框来获取用户输入的金额，所以我希望当用户开始在文本框中键入时（不是在他们完成键入之后，而是在旅途中），总是在最后两位数字前面自动添加一个点（.）。

例如：

  • 用户将鼠标移动到文本框并键入"1"=>文本框为自动显示为0.01
  • 用户键入"12"=>文本框显示为0.12
  • 用户键入的"123"=>文本框显示为1.23
  • 用户键入的"1234"=>文本框显示为12.24
  • 用户键入"123456"=>文本框显示为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而不是onblr:<asp:TextBox ID="txtAmount" runat="server" MaxLength="12" onkeyup="process();" />

  • 在"process（）"JS函数中，执行以下步骤：

  • 首先：var amount = document.getElementById("<%=txtAmount.ClientID %>").value;

  • 然后删除amount的点（例如0.01=>001、00.12=>0012、12.34=>1234，依此类推）
  • 删除amount前面的所有零0（例如001=>1、0012=>12、0102=>102、1234=>仍然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;

在asp.net文本框中键入时自动添加一个点(.)(将文本框格式设置为小数点后两位)

下面的代码应该可以帮助您实现逻辑。在这个例子中，我起诉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>
相关文章：