【问题标题】:Input for percentage values输入百分比值
【发布时间】:2025-12-08 00:55:02
【问题描述】:

我的 web 应用中有一些输入,我们要求用户输入百分比值(例如 10.75%、23%)。目前,他们必须以十进制形式输入这些值(例如 0.1075 、0.23)。

这让一些用户感到困惑,所以我希望有一种方法可以将值与这些格式相互转换(后端有十进制值,HTML 输入显示百分比值)。有没有办法解决这个问题,而不必用 javascript 或类似的东西自己动手?

我在 HTML5 输入中没有看到任何可以执行此操作的内容,并且我无法找到可以轻松执行此操作的 javascript 库。

其他人在 HTML 中以什么方式进行百分比输入?


其他信息

webapp 正在使用 Java/Spring,因此进入 HTML 页面的值来自相关 java 对象的字符串,所以理想情况下,我正在寻找不需要任何后端编码的东西。


回答

事实证明 Spring 3.0 会自动执行此操作。注释有问题的字段:

@NumberFormat(style = NumberFormat.Style.PERCENT)
private BigDecimal rate;

将执行所有与输入字段之间的转换。

【问题讨论】:

    标签: javascript html spring-mvc


    【解决方案1】:

    所需的javascript非常简单。例如,您可以在用户提交时将用户输入的分数值存储在隐藏字段中。

    ​<form id="myForm">
        <input type="text" id="myPercent" name="myPercent" />%
        <input type="hidden" id="myFraction" name="myFraction" />
        <input type="submit" />
    </form>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
    <script type="text/javascript">
        document.getElementById('myForm').onsubmit = function() {
            document.getElementById('myFraction').value = 
                document.getElementById('myPercent').value / 100;
        }
    </script>
    

    【讨论】:

      【解决方案2】:

      这是简单的数学运算... 75 到 0.75 是 75/100。包括一行在提交数字后转换数字。

      【讨论】:

      • 理想情况下,我希望在一个输入框中完成所有操作(不使用隐藏字段)。如果在失去焦点后 10.75% 变为 0.1075,用户可能会感到有些困惑。
      • 那你不能在提交时做吗?在输入框后显示一个“%”字符,他们输入75,然后你提交表单时除​​以100?
      • 我不太明白你的问题。让他们输入 75。当他们提交时,您在代码中将其除以 100……如果您想返回百分比值,只需将其乘以 100,然后返回即可。也许您需要向我们提供有关您的 web 应用程序如何工作的更多信息。
      • 我在问题中添加了一些额外的信息。这些值直接来自/来自 java 对象,因此我希望尽可能避免更改后端代码。
      • @JohnFarrelly 您可以使用 css 伪类 :after 在输入框后添加百分号。