Форум

ar4ipers · #1 (**permalink**) 26.04.2018, 21:45

Здравствуйте. при вводе данных в поле inputa хочу добавлять ему класс red, если его текущее значение поля не совпадает с изначальным, и удалять этот класс, если значения совпадают

<input type="text" name="name" class="js_name" value="sometext">

Использую событие oninput, но класс не удаляется когда текущее значение совпадает с изначальным value, Может подскажет кто в каком направлении двигаться?

var valueInput = document.querySelector('.js_name').value;
    var input = document.querySelector('.js_name');
    input.oninput = function () {
        if (valueInput != input.value) {
            document.querySelector('.js_name').className = "red"
        }
    };

рони · #2 (**permalink**) 26.04.2018, 21:53

ar4ipers,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css"> .red{
      background-color: #FF0000;
  }

  </style>


</head>

<body>
<input type="text" name="name" class="js_name" value="sometext">
 <script>

    var input = document.querySelector(".js_name");
    var valueInput = input.value;
    input.oninput = function () {
        input.className = "";
        if (valueInput != input.value) {
            input.className = "red"
        }
    };

  </script>
</body>
</html>

рони · #3 (**permalink**) 26.04.2018, 22:07

ar4ipers,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css"> .red{
      background-color: #FF0000;
  }

  </style>


</head>

<body>
<input type="text" name="name" class="js_name" value="sometext">
 <script>

    var input = document.querySelector(".js_name");
    input.oninput = function () {
        with(this) className = defaultValue == value ? "" : "red";
    };
 </script>
</body>
</html>

Malleys · #4 (**permalink**) 26.04.2018, 22:08

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css"> .js_name:invalid{
      background-color: #FF0000;
  }

  </style>


</head>

<body>
<input type="text" name="name" class="js_name" value="sometext" pattern="sometext">
</body>
</html>

Это если вам нужно именно цвет, а не добавление класса

ar4ipers · #5 (**permalink**) 26.04.2018, 22:45

Спасибо)

ar4ipers · #6 (**permalink**) 26.04.2018, 22:46

Спасибо за вариант)

Форум

Справочник

Discord чат

Курсы javascript