使用jQuery在输入框中显示一个小数点后2位的值，同时保持更高的精度[重复]

Posted 2023-04-14

【中文标题】使用jQuery在输入框中显示一个小数点后2位的值，同时保持更高的精度[重复]

【英文标题】：Using jQuery to display a value to 2 decimal places in an input box while retaining more precision [duplicate]

【发布时间】：2011-03-16 01:40:04

【问题描述】：

可能重复：javascript: formatting number with exactly two decimals

也许我用错了方法，但我有一些 javascript 正在用 12.434234234 之类的数字填充一些文本输入。我希望文本输入仅显示 12.43，但我希望它的值保持为 12.434234234。

这甚至可能吗？如果没有，最好的解决方法是什么？

谢谢！ 约翰。

--

虽然这里有一些非常好的答案，但我一直在寻找类似“你为什么不使用这个聪明的单衬里的东西..”之类的东西 - 因此我勾选了最基本的方法，即只使用额外的字段。不过谢谢！标记了所有答案。

【问题讨论】：

用户与这些数字有什么样的互动？为什么保持精度很重要？

我的客户希望能够将交易拆分，例如将 12.53 美元分成几个百分比的部分。例如，12.53 美元的 50% 是两手 6.265 美元。尽管 0.5 美分听起来并不多，但我们不想在某处失去这笔钱。我们确实在某处划定界线，但该处将在数据库中或我不关心的某个地方，只要有相当的精确度。

但是我的客户也不希望应用程序显示那种精度，因为它看起来很丑：p

【参考方案1】：

num = 12.434234234;
result = num.toFixed(2); // returns 12.43

【参考方案2】：

您可以将细粒度值存储在隐藏字段中，并修剪为用户显示的值。

【讨论】：

你也可以使用一个变量而不是为此创建一个完整的隐藏字段。

文本输入通常用于 html 表单。您会在哪里保留该变量以进行进一步处理？

我明白了，如果您要与服务器进行非 JavaScript 交互，并希望在多个页面上保留全部价值。是的，那这就是你想要的。如果您只想在与单个页面的交互过程中记住该值，那么变量就足够了。

【参考方案3】：

您可以将输入的值存储为输入的 data（使用 jQuery），在加载时对其进行格式化，然后在 submit 期间替换该值，如下所示：

http://jsfiddle.net/magicaj/8cdRs/1/

HTML：

<form id="form">
    <input type="text" class="formatted-number-input" value="12.434234234" />
</form>

JS：

$(".formatted-number-input").each(function() 
   var value = $(this).val(); 
   $(this).data("originalValue", value);
   var roundedValue = value.toFixed(2);
   $(this).val(roundedValue);
);

$("#form").submit(function()     
    var formattedInput = $(".formatted-number-input");
    formattedInput.each(function() 
        var originalValue = $(this).data("originalValue");
        $(this).val(originalValue);
    );
);

【讨论】：

老款switcharoo，我喜欢！

@John Hunt 哈哈，我不提倡将此作为最佳实践。很多时候，我只是忙于回答字面上的问题，而不是试图理解用例并提供更好的交互设计，我认为这可能需要......

【参考方案4】：

有多种方法可以解决这个问题： 1. 创建隐藏字段，在其中存储 12.434234234 并在文本字段中显示格式化值。 2. 使用 jquery.data() 存储原始 12.434234234 并在文本字段中显示格式化值。