gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 00:51:24 25 4
gpt4 key购买 nike

我有一个文本框来获取用户输入的金额,因此我希望在用户开始在文本框中输入内容时(而不是在完成后)自动在最后 2 位数字前面添加一个点 (.)打字但在旅途中)。

例如:

  • 用户将鼠标移至文本框并输入“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 存在一个错误(如果文本框失去焦点, mask 不会消失)

我现有的代码仅在数字末尾添加一个点和 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();" />

  • 在“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;

最佳答案

下面的代码应该可以帮助您理解逻辑。在此示例中,我起诉 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>

关于javascript - 在 asp.net 文本框中键入内容时自动添加点 (.)(将文本框格式设置为小数点后两位),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26738822/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com