jQuery input

[isys]

Здравствуйте. Помоги пожалуйста решить следующий вопрос...

<div class="input_bal">
<input name="sum" type="number" min="20" max="1000" placeholder="количество" class="f_input"/>
</div>

$ = jQuery;

     $(function () {
        $('.input_bal input').on('keyup change blur', function() {
            var val = parseInt($(this).val()),
                max = parseInt($(this).attr('max')),
                min = parseInt($(this).attr('min'))
            ;

            if(val > max) {
                val = max;
            }

            if(val < min) {
                val = min;
            }

            $(this).val(parseInt(val));
        });
    })

Понятное дело что так я не смогу ввести цифру 100, к примеру, после ввода 1 у меня сразу jQuery отработает и установит 20.

Буду благодарен за подсказку.

[Aetae]

Ну можно поставить таймер на от последнего нажатия.
А так, нативный number например никак с этим не работает: если вводить нажатием на крутилки - то меньше минимального и больше минимального не поставит, а если вручную - просто подсветит по change как невалидный и всё. Думаю тут изобретать ничего не надо.

[j0hnik]

<input type="number"/>
	<script>
		var time; 
		document.querySelector('input').addEventListener('input', function(e){
			clearTimeout(time);
			time = setTimeout(()=>{
				if(this.value > 1000) this.value = 1000;
				else if(this.value < 20) this.value = 20;
			},1000);
		});
	</script>

[Aetae]

j0hnik,
не интуитивно же.

[j0hnik]

Aetae,
На этом собственно мои полномочия ВСЕ!

[j0hnik]

<style>
		.f_input:out-of-range{
			border: 2px solid red;
		}
	</style>
<input name="sum" type="number" min="20" max="1000" placeholder="количество" class="f_input"/>

[isys]

@j0hnik Спасибо! С подсветкой идея даже лучше, как по мне.
Очень хорошо!