Изменение цвета поля Input при наборе текста (именно при наборе,а не при установке курсора мышки в поле Input)

@nikita-321 · Регистрация: 13.04.2017

Author24 — интернет-сервис помощи студентам

Добрый день всем!
Подскажите пожалуйста код, позволяющий сделать следующие действия.

Есть поле Input и в нем необходимо сделать так, чтобы при наборе текста (именно при наборе, а не в тот момент, когда в поле Input мигает курсор) изменился цвет фона внутри поля Input.
Мне помогли составить следующий код в html/css. Не хватает кода, который позволит сделать описанные выше манипуляции.
Фото прилагается. Действия как на первом и втором фото описаны кодом ниже. Подскажите как реализовать действия как на третьем фото.

HTML5

<div class="input">
  <label class="input__label">
      <input type="text" class="input__control" required>
      <span class="input__label-text">Фильтр заказов</span>
  </label>
</div>

CSS

body {
  font: 10px/1.5 Arial, sans-serif;
background: gray;}
 
.input {margin: 50px auto;}
 
.input__label {
  position: relative;
  display: inline-block;
}
 
.input__control {
  border-radius: 50px;
  height: 40px;
  width: 200px;
    border:none;
  outline: none;
  font: inherit;
  font-size: 14px;
  color: #000;
  padding: 0 20px;
    }
  
  .input__control:focus {
  outline: 0;
  }
  
  .input__control:focus + .input__label-text,
.input__control:valid + .input__label-text {
  top: -10px;
  color: #000;
}
 
.input__label-text {
  position: absolute;
  left: 20px;
  top: 10px;
  font-size: 14px;
  color: #ccc;
 /*  pointer-events: none;  */
  transition: 150ms ease-in-out;
}

@Пифагор · 13.04.2017, 11:59

nikita-321, так?

PHP/HTML

<input type="text" id="text">
<script>
text.addEventListener('keydown', function(){
  this.style.backgroundColor = 'green';
})
text.addEventListener('keyup', function(){
  this.style.backgroundColor = '';
})
</script>

@nikita-321 · 13.04.2017, 12:21 **[ТС]**

Не совсем!
Когда набираю в поле Input текста, то фон меняется на зеленый (в тот момент когда нажимаю на кнопки клавиатуры).
Но как только перестаю нажимать кнопки на клавиатуре, то зеленый фон сразу же пропадает.
Можно ли это исправить?
Чтобы фон внутри Input был все время зеленого цвета после набора текста?

@Пифагор · 13.04.2017, 12:23

Сообщение от nikita-321

Можно ли это исправить?

Можно.

PHP/HTML

<input type="text" id="text">
<script>
text.addEventListener('keydown', function(){
  this.style.backgroundColor = 'green';
})
</script>

@nikita-321 · 13.04.2017, 12:41 **[ТС]**

Пифагор, вот сейчас все получилось просто супер-отлично!
Спасибо тебе огромнейшее!))

@nikita-321 1 / 1 / 0 Регистрация: 13.04.2017 Сообщений: 12
	13.04.2017, 12:21 [ТС]	3
	Не совсем! Когда набираю в поле Input текста, то фон меняется на зеленый (в тот момент когда нажимаю на кнопки клавиатуры). Но как только перестаю нажимать кнопки на клавиатуре, то зеленый фон сразу же пропадает. Можно ли это исправить? Чтобы фон внутри Input был все время зеленого цвета после набора текста? 0

@nikita-321 1 / 1 / 0 Регистрация: 13.04.2017 Сообщений: 12
	13.04.2017, 12:41 [ТС]	5
	Пифагор, вот сейчас все получилось просто супер-отлично! Спасибо тебе огромнейшее!)) 0