0

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

.error {
background-color: red;
}
<input type="text" name="name" class="name" value="Boris">

3 ответа 3

1

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">

1
  1. Запоминаем начальное значение input-a
  2. Добавляем обработчик события изменения значения input-a
  3. В обработчике сравниваем текущее значение 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>

-1

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

$("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"/>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.