HTML5 数字输入 - 显示为百分比而不是小数

Question

我有一个表格，其中包含应该代表百分比的数字输入，其设置大致如下所示：

 <input type="number" min="0" max="1" step="0.01" />

目前，这些值显示为小数，例如 0.25。如果文本字段中显示的数字显示为百分比，我认为它会更加用户友好。我已经使用下面的 jQuery 代码禁用了字段上的键盘输入，所以我不担心用户输入恶意值：

 $('input[type="number"]').keypress(function (field) {
    field.preventDefault();
});

有没有一种简单的方法可以更改数字字段以显示百分比？

谢谢！

原文由 Argus9 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我希望有两种方法可以奏效。

如果你想要输入的百分比并且需要在 js 中将它转换为小数，那么：

 <input type="number" min="1" max="100" id="myPercent"/>

在 js 中：

 document.getElementById('myForm').onsubmit = function() {
    var valInDecimals = document.getElementById('myPercent').value / 100;
}

如果情况相反，则：

 <input type="number" min="0" max="1" step="0.01" id="myPercent"/>

在 js 中：

 document.getElementById('myForm').onsubmit = function() {
    var valInDecimals = document.getElementById('myPercent').value * 100;
}

原文由 Bunny buns 发布，翻译遵循 CC BY-SA 4.0 许可协议