Не удалять класс active у input[type='number'] если он не пустой

Question

Если в input[type='number'] введен символ "е", то это поле считается пустым. Поэтому, при mouseup вне элемента, у него убирается класс "active".

$(document).on("mouseup", function(e) {
  e.preventDefault();
  hide_element = $(".input_wrapp");
  if (!hide_element.is(e.target) &&
    hide_element.has(e.target).length === 0) {
    $(".input_wrapp").each(function() {
      if ($(this).find("input").val() == "") {
        $(this).find("input").removeClass("active");
      }
    });
  }
});

<div class="input_wrapp">
  <input type="number" />
</div>
<div class="input_wrapp">
  <input type="number" />
</div>
<div class="input_wrapp">
  <input type="number" />
</div>

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

Answer 1

Учитывая предыдущий вопрос, проясню один момент:

Элемент <input> с type="number" имеет встроенную проверку введённого значения. Именно эта валидация не позволяет вводить символы отличные от цифр (за исключением символов: + - . , e) и возвращает пустую строку, при любом некорректном значении. По этой причине, невозможно получить реальное текущее введённое значение, пока оно не будет приведено к валидному виду.

Если же задача состоит в том, чтобы просто знать, что поле не пустое, то можно воспользоваться проверкой отображения подсказки в поле - :placeholder-shown. В этом случае, наличие данного псевдокласса будет истинным, только в случае отсутствия любых символов (т.е. поле ввода будет полностью пустым).

Таким образом, можно проверить, введены ли какие-либо символы, даже если value возвращает пустую строку из-за некорректного значения.

Важно! Для реализации вышеописанной проверки, у элемента <input> должен присутствовать атрибут placeholder, который будет содержать по крайней мере один символ (допускаются непечатные символы и пробел, на случай, если подсказка не должна быть видимой).

Думаю, что следующий пример удовлетворяет основному требованию:

Нужно чтобы, если input[type='number'] был не пустым, то класс "active" не убирался.

Все значения для class и placeholder произвольны и указаны лишь для наглядного примера.

$('input').on('input', function() {
  $(this).toggleClass('active', !$(this).is(':placeholder-shown'));
  console.log(this);
}).trigger('input');

.active { background-color: cyan; }

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

<input type="number" placeholder="field_1" class="active" />
<input type="number" placeholder="field_2" class="second" />
<input type="number" placeholder="field_3" />

БЛОГ НА HUSL

Не удалять класс active у input[type='number'] если он не пустой

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