Изменить класс input при вводе

Question

Как при вводе данных в поле input добавлять ему класс .error, если его текущее значение поля не совпадает с изначальным, и потом удалять этот класс, если значения совпадают?

.error {
background-color: red;
}

<input type="text" name="name" class="name" value="Boris">

Answer 1

Запоминаем начальное значение input-a
Добавляем обработчик события изменения значения input-a
В обработчике сравниваем текущее значение input-а с начальным и в зависимости от этого либо добавляем класс, либо убираем его

let $input = $("input");
let baseValue = $input.val();

$input.on("input", function() {
  $input.toggleClass("error", $input.val() !== baseValue);
});

.error {
  background-color: red;
}

<input type="text" name="name" class="name" value="Boris">

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

Answer 2

Обрабатывайте событие ввода, и ставьте класс.

$("input").keyup(function(e){
   $(this).toggleClass('error', $(this).val() != $(this).data('initial'));
});

.error {
  background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" name="name" class="name" value="Boris" data-initial="Boris"/>

Answer 3

var input = document.querySelector(".name");
input.oninput = function() {
  with(this) className = defaultValue == value ? "" : "error";
};

.error {
  background-color: red;
}

<input type="text" name="name" class="name" value="Boris">

Или:

var input = document.querySelector(".name");
var valueInput = input.value;
input.oninput = function() {
  input.className = "corrected";
  if (valueInput != input.value) {
    input.className = "error"
  }
};

.error {
  background-color: red;
}

.corrected {
  background-color: green;
}

<input type="text" name="name" class="name" value="Boris">

Answer 4

Не знаю, насколько критично для Вас добавление класса .error, но подсветить корректность введённых данных можно простым нативным способом без JS. Как вариант:

input:invalid {
  background-color: red;
}

<input type="text" name="name" class="name" value="Boris" pattern="Boris" required>

БЛОГ НА HUSL

Изменить класс input при вводе

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