输入百分比值

时间:2012-12-08 13:55:25

标签: javascript html html5 spring-mvc

我的webapp上有一些输入,我们要求用户输入百分比值(例如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;

将完成与输入字段之间的所有转换。

2 个答案:

答案 0 :(得分:2)

所需的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>

答案 1 :(得分:1)

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