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)" />

CodePudding user response：

You probably don't even need to use JavaScript for this, just plain HTML can solve your problem. The input tag has the minand maxproperties 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.

CodePudding user response：

My next question how to call getElementById multiple ids in one line of code? I tried to write like this but failed :

function minmax() {
  const inp_field = document.querySelectorAll("#input1, #input2, #input3, #input4");

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

CodePudding user response：

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.

CodePudding user response：

• 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)" />

CodePudding user response：

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'>