Javascript input field onchage/oninput

Question

Please help, how to make input like this in javascript? Minimum number that can be entered = 0.01 Maximum number that can be entered = 94.99 if it passes the minimum/maximum it will automatically return to the default number for the minimum/maximum. Meanwhile, if you enter the number 01.21, the number will automatically change to 1.21

Thanks for taking the time to answer, and provide direction.

I want to create an input field similar to this

I tried like this but it doesn't work

 function minmax(value, min, max) { if (parseInt(value) < 0.01 || isNaN(value)) return 0.01; else if (parseInt(value) > 94.99) return 94.99; else return value; }

 <input type="text" name="textWeight" id="txtWeight" maxlength="5" onkeyup="this.value = minmax(this.value, 0.01, 94.99)" />

Answer 1

You probably don't even need to use JavaScript for this, just plain HTML can solve your problem. The input tag has the min and max properties that set minimum and maximum values for the input. Also, you could set the step of your input to 0.01.

This should solve your problems on the front-end. But note that this isn't enough to ensure that the data received by the back-end (if that's the case) is following your specifications, because malicious users can alter your page and send the data anyways, or even bypass the front-end completely. So, the back-end should also check if the data received is on the right format.

Answer 2

You can use onchange event for this or add an event listerner to the input field and min, max to specify the maximum and minimum number.

<input id="input1" type="number" onchange="minmax()" min="0.01" max="94.99">

Then you can use javascript to compare the user entered value with min and max values using an if condition. If the user entered value is invalid simply replace the input field value with either min or max value!

Use parseFloat() since you are dealing with floats.

function minmax() {
   let inp_field = document.getElementById("input1");

   let val = parseFloat(inp_field.value),
       min = parseFloat(inp_field.min),
       max = parseFloat(inp_field.max);

   if (val < min) {
      inp_field.value = min;
   } else if (val > max) {
      inp_field.value = max;
   } else {
      inp_field.value = val;
   }
}

And for the last part the parseFloat will automatically do that for you by clearing the leading zeroes.

Answer 3

There are two event handlers limitRange() is bound to the input event and keepDot() is bound to the keyup event (set on capture, note the third parameter is true ). keepDot() just handles the way Firefox refuses to accept the . key.

x.addEventListener('input', limitRange);
x.addEventListener('keyup', keepDot, true);

It has two jobs. First job is to limit input lower than .01 or higher than 94.99

this.value = +v < .01 ? '.01' : +v > 94.99 ? '94.99' : v;

The second job is to remove any leading zeros

 this.value = v.replace(/^0+/, '');

 const x = document.querySelector('#x') x.addEventListener('input', limitRange); x.addEventListener('keyup', keepDot, true); function limitRange(e) { let v = this.value; this.value = +v < 0.01 ? '0.01' : +v > 94.99 ? '94.99' : v; this.value = this.value.replace(/^0+(?=\d)/, '') } function keepDot(e) { if (e.key === '.') { this.value = this.value + '.' } }

 <input id='x' type='number' min='.01' max='94.99' step='any'>

Answer 4

• call on onchange method
• else return value - 0.01; return float value
• parseInt() return integer value use parseFloat() return float valve
• value - 0 remove useless 0 in value like 01.11 to 1.11`

 function minmax(value, min, max) { if (parseFloat(value) < 0.01 || isNaN(value)) return 0.01; else if (parseInt(value) > 94.99) return 94.99; else return value - 0; }

 <input type="text" name="textWeight" id="txtWeight" maxlength="5" onchange="this.value = minmax(this.value, 0.01, 94.99)" />

Answer 5

Hello thank you for question, the solution is simple try out once below code.

<input type="text" name="textWeight" id="txtWeight" maxlength="5" onkeyup="this.value = minmax(this.value, 0.01, 94.99)" />

Here you need to use parseFloat() since you are using floating values.

function minmax(value, min, max) {
  if ((parseFloat(value) < 0.01 && value.length > 1) || isNaN(value))
    return 0.01;
  else if (parseFloat(value) > 94.99)
    return 94.99;
  else return value;
}