Присвоить input класс active если поле не пустое

Question

Вот HTML

<input type="number" placeholder="" />

Вот JS

$("input").on("keyup", function(e) {
    if($(this).val() != "") {
        $(this).addClass("active");
    }
});

В input[type='number'] можно ввести только цифры. Но символ "е" тоже вводится. Нужно сделать проверку если поле не пустое то присвоить ему класс active. Если случайно введен символ "е" то класс active тоже нужно присвоить. Нужно чтобы класс присваивался всегда если поле не пустое. Как это сделать?

Answer 1

Получилось как-то так. Но если нажать на стрелку вверх-вниз, то экспанента исчезнет. И нужно либо применять замену значения с регуляркой, либо кастомные стрелки делать.

$("input").on("keyup", function(e) {    
    $(this).removeClass("active");    
    
    if($(this).val() != "" || e.keyCode === 69) {          
        $(this).addClass("active");
    }
});

.active {
  background-color: blue;
  color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<input type="number" placeholder="" />

Answer 2

Думаю, что будет правильнее ставить обработчик на событие input, а не на keyup:

$('input').on('input', function() {
  $(this).toggleClass('active', ($(this).val() != '' && !/e/gi.test($(this).val())));
});

.active { background-color: cyan; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="number" placeholder="" />

БЛОГ НА HUSL

Присвоить input класс active если поле не пустое

Ответы (2 шт):