restricting numbers to a percentage

Question

I was thinking about forcing people to be only capable of writing the numbers between 0-100 (because of the maximum number attained via a percentage is 100%).

Is there a way to force people to input a number between 0-100%? I am already restricting them to 3 digits using javascript.

I am looking to using javascript for this.

Answer 1

You could use a number input <input type="number" min="0" max="100">, but it won't work in all browsers so you'll have to complement it by some javascript in order to double check the value is correct.

Answer 2

You could use the Range type input element, which appears as a slider.

<input type="range" name="percentage" min="0" max="100">

Or you could run a validation function on the onchange or onkeyup events, that checks for a value more than 100.

<input type="text" name="percentage" onkeyup="validate(this);">

function validate(el){
    if(el.value > 100){
        el.value = 100;
    }
}