javascript 百分比值的输入

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/13778104/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-26 19:45:07  来源:igfitidea点击:

Input for percentage values

javascripthtmlspring-mvc

提问by John Farrelly

I have some inputs on my webapp where we're asking the user to enter percentage values (e.g 10.75%, 23%). Currently, they have to enter these values as decimal (e.g. 0.1075 , 0.23).

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

This is causing confusion for some users, so I was hoping there was a way I could convert the values to and from these formats (the backend has decimal values, the HTML inputs display the percentage values). Is there a solution to this without having to roll-my-own with javascript or the like?

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

I didn't see anything in the HTML5 inputs that would do this, and I wasn't able to find a javascript lib that would do it easily.

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

What way have other people been doing percentage inputs in HTML?

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



Additional Info

附加信息

The webapp is using Java/Spring, so the values coming to the HTML page are coming string from the java objects in question, so ideally I'm looking for something that doesn't take any backend coding.

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



Answer

回答

It turns out that Spring 3.0 will do this automatically. Annotating the fields in question with:

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

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

Will do all the conversion to and from the input field.

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

采纳答案by Stuart

The javascript required is very simple. For example you could store the fraction value of the user's input in a hidden field when the user submits.

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

回答by Lotzki

It's simple math... 75 to .75 is 75/100. Include a line which converts the numbers after they submitted them.

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