jQuery input
Здравствуйте. Помоги пожалуйста решить следующий вопрос...
<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. Буду благодарен за подсказку. |
Ну можно поставить таймер на от последнего нажатия.
А так, нативный number например никак с этим не работает: если вводить нажатием на крутилки - то меньше минимального и больше минимального не поставит, а если вручную - просто подсветит по change как невалидный и всё. Думаю тут изобретать ничего не надо. |
<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>
|
j0hnik,
не интуитивно же. |
Aetae,
На этом собственно мои полномочия ВСЕ! |
<style>
.f_input:out-of-range{
border: 2px solid red;
}
</style>
<input name="sum" type="number" min="20" max="1000" placeholder="количество" class="f_input"/>
|
@j0hnik Спасибо! С подсветкой идея даже лучше, как по мне.
Очень хорошо! |
| Часовой пояс GMT +3, время: 06:22. |