Есть 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);
});

Comments

[Maxymus1996]

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

[Maxymus1996]

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

[Maxymus1996]

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

[0xD34F]

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

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

function updateValueOnEnter(input, f) {
  input.addEventListener('keypress', function(e) {
    if (e.keyCode === 13) {
      this.value = f(this.value);
    }
  });
}