HTML5 number input - display as percentage instead of decimal

Question

I have a form including number inputs which are supposed to represent percentages, which are set up approximately like below:

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

Currently, the values show up as decimals, for example, 0.25. I think it'd be a lot more user-friendly if the number displayed in the text field showed up as a percentage instead. I've already disabled keyboard input on the field using the below jQuery code, so I'm not worried about users inputting rogue values:

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

Is there an easy way to change the number fields to display a percentage?

Thank you!

Answer 1

There are two ways which I hope will work.

If you want percentages in input and need to convert it to decimals in js then:

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

in js:

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

If scenario is reverse then:

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

in js:

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

Answer 2

While not a HTML5 input type='number', the solution bellow uses input type='text' to the same effect. The rational of not using type='number' being humans require a nicely formatted string like "23.75%" while robots prefer to read integers and floating points should be avoided. The snippet bellow does just that to 2 decimal places.

I haven't tested it on a mobile, but I think the number pad should appear as with 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">