Есть 2 input, как запретить ввод числа во второй, значение которого меньше первого?

Question

[Maxymus1996]

Есть 2 input, как запретить ввод числа во второй, значение которого меньше первого, и наоборот, запретить ввод в первый input числа, которое больше второго?
К примеру, если в первом input значение 200, чтобы во второй нельзя было ввести число меньше?

Answer 1

[0xD34F]

<input id="lower" type="number" value="100">
<input id="upper" type="number" value="200">

const lower = document.querySelector('#lower');
const upper = document.querySelector('#upper');

lower.addEventListener('input', function() {
  this.value = Math.min(this.value, upper.value);
});

upper.addEventListener('input', function() {
  this.value = Math.max(this.value, lower.value);
});

UPD. Вынесено из комментариев:

Можно сделать проверку после нажатия enter?

updateValueOnEnter(lower, val => Math.min(val, upper.value));
updateValueOnEnter(upper, val => Math.max(val, lower.value));

function updateValueOnEnter(input, f) {
  input.addEventListener('keypress', ({ key, target: t }) => {
    if (key === 'Enter') {
      t.value = f(t.value);
    }
  });
}

Comments

[Maxymus1996]

Да, спасибо большое!

[Maxymus1996]

Хотя нет, нужна еще одна поправочка - если в нижнем значении стоит 100, то в верхнем не могу при помощи ручного ввода начать вводить число, которое начинается с 2 и выше, так как считает, что это меньшее число

[Maxymus1996]

Можно сделать проверку после нажатия enter?

[0xD34F]

Дополнил ответ.