Сравнение на лету двух числовых значений в inputах

08 февраля 2022, 05:30

Есть инпуты

<input type="number" name="minim" value="" />
<input type="number" name="maxim" value="" />

Как бы это их сравнивать на лету, чтобы юзер не мог ввести в minim значение больше, чем на данный момент введено в maxim, и наоборот, не мог ввести в maxim цифру меньше, чем на данный момент введена в minim?

То есть, вот он ввел в maxim число 5000, значит в minim он может ввести не больше, чем 4999.

Спасибо!

Answer 1

var min = document.querySelector('[name="minim"]') 
var max = document.querySelector('[name="maxim"]') 
 
min.addEventListener('input', ()=> max.min = min.valueAsNumber+1) 
max.addEventListener('input', ()=> min.max = max.valueAsNumber-1) 
 
min.addEventListener('blur', 
()=> max.valueAsNumber < min.valueAsNumber && (min.value = max.valueAsNumber-1)) 
max.addEventListener('blur', 
()=> min.valueAsNumber > max.valueAsNumber && (max.value = min.valueAsNumber+1))

<input type="number" name="minim" value="" /> 
<input type="number" name="maxim" value="" />

Answer 2

const el_min = document.querySelector('input[name=minim]') 
const el_max = document.querySelector('input[name=maxim]') 
 
el_min.addEventListener('input', xxx) 
el_max.addEventListener('input', xxx) 
 
function xxx(e) { 
  if (e.target.name == 'minim' && +e.target.value > +el_max.value && el_max.value) 
    el_min.value = el_max.value - 1 
 
  if (e.target.name == 'maxim' && +e.target.value < +el_min.value && el_min.value) 
    el_max.value = +el_min.value + 1 
}

<input type="number" name="minim" value="" /> 
<input type="number" name="maxim" value="" />

Answer 3

<!DOCTYPE html> 
<html> 
<head> 
	<title></title> 
</head> 
<body> 
	<div id="form"> 
		MIN<input id="inp_min" type="number" name="minim" value="" /> 
		MAX<input id="inp_max" type="number" name="maxim" value="" /> 
	</div> 
 
	<script type="text/javascript"> 
		"use strict"; 
 
		let inp_min = document.getElementById("inp_min"); 
		let inp_max = document.getElementById("inp_max"); 
 
		inp_min.addEventListener("blur", dec); 
		inp_max.addEventListener("blur", dec); 
 
 
		function dec(e) { 
			if (e.target.id === "inp_min" && inp_max.value && +e.target.value >= +inp_max.value) { 
				e.target.value = (+inp_max.value-1); 
			} else if (e.target.id === "inp_max" && inp_min.value && +e.target.value <= +inp_min.value) { 
				e.target.value = (+inp_min.value+1); 
			} 
		} 
		 
	</script> 
</body> 
</html>