Question 213307 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How can set min and max value for TextField on React

So, I have 3 input field and I want to control just one input’s value. The input that I want to control should be bigger or equal the first input’s value and it should be lesser or equal the second input’s value. The issue is that when i try to get value of the input with onChange func it can get only 1 character once.

here is the input that i want to controll

                   <input
                    className={cn(styles.textField)}
                    name="floorsTo"
                    value={inputVal}
                    onChange={(e) => {
                      e.persist();
                      const { value } = e.target;
                      if (
                        parseInt(value) > parseInt(floorsCount) ||
                        parseInt(value) < parseInt(floorsFrom)
                      ) {
                        return false;
                      }
                      setInputValue(value);
                    }}
                    type="text"
                  />

and floorsCount and floorsFrom are the other inputs. by the way it works for only single numbers

Tags:

2

Answers


  1. 0

    It’s not working because in every change you’re checking the value against the other two values. You can make this check at onBlur because you need to let the user enter the complete value, first. For example, if the first number is 10 and second one is 20, the user tries to enter 15 but the logic above doesn’t let them enter 1 because 1 is less than 10.

    You can make the check at onBlur and if it passes, you can use the new value and if not you can return back to the latest value that input had.

    Login or Signup to reply.
  2. 0

    As far as I understood your question. You need to have the controlled input values to be ranged in between the first input controls specified number and the second input controls specified number.
    Refer the code below for reference:

    const firstInput = document.getElementById('firstInput');
const secondInput = document.getElementById('secondInput');
const controlledInput = document.getElementById('controlledInput');

controlledInput.addEventListener('input', controlInputUpdater);

function controlInputUpdater() {
  let controlledValue = parseInt(controlledInput.value);

  if (controlledValue < parseInt(firstInput.value)) {
    controlledValue = parseInt(firstInput.value);
  }

  if (controlledValue > parseInt(secondInput.value)) {
    controlledValue = parseInt(secondInput.value);
  }

  controlledInput.value = controlledValue;
  console.log(controlledInput.value)
}
    <label for="firstInput">First number:</label>
<input type="number" id="firstInput">

<label for="secondInput">Second number:</label>
<input type="number" id="secondInput">

<label for="controlledInput">Controlled number:</label>
<input type="number" id="controlledInput">
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search