Question

我有一个包含数字输入的表单，它们应该代表百分比，大致如下所示：

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

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

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

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

谢谢！

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;
}

Answer 2

也许添加一个函数，输出的数字（例如0.25）* 100 +“％”，这样你总是以百分比形式。

function topercentage() {
    var outputnumber = outputnumber * 100 + "%";
}

在此示例中，outputnumber是数字，例如0.25。我希望这有效。

Answer 3

虽然不是HTML5输入类型=“数字”，但解决方案下面使用输入类型=“文本”来达到相同的效果。不使用type ='number'作为人类的合理性要求格式正确的字符串，例如“ 23.75％”，而机器人更喜欢读取整数，应避免使用浮点数。下面的代码段仅将其保留到小数点后2位。

我尚未在手机上对其进行测试，但我认为数字键盘应与input type ='number'一起显示。

Codepen.io：Commented code can be found here

document.querySelector('.percent').addEventListener('input', function(e) {
  let int = e.target.value.slice(0, e.target.value.length - 1);

  if (int.includes('%')) {
    e.target.value = '%';
  } else if (int.length >= 3 && int.length <= 4 && !int.includes('.')) {
    e.target.value = int.slice(0, 2) + '.' + int.slice(2, 3) + '%';
    e.target.setSelectionRange(4, 4);
  } else if (int.length >= 5 & int.length <= 6) {
    let whole = int.slice(0, 2);
    let fraction = int.slice(3, 5);
    e.target.value = whole + '.' + fraction + '%';
  } else {
    e.target.value = int + '%';
    e.target.setSelectionRange(e.target.value.length - 1, e.target.value.length - 1);
  }
  console.log('For robots: ' + getInt(e.target.value));
});

function getInt(val) {
  let v = parseFloat(val);
  if (v % 1 === 0) {
    return v;
  } else {
    let n = v.toString().split('.').join('');
    return parseInt(n);
  }
}

<input class="percent" type="text" value="23.75%" maxlength="6">

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

3 个答案: