当文本输入到输入字段时，有没有办法更改div的背景？

Question

我有下面的代码，我希望每次有人在输入字段中输入/输入文本时，强制使用类“target_bg”的div的背景将其颜色从红色（默认）更改为绿色。

<div class="target_bg"></div>
<input placeholder="Search for Restaurants..." 
class="search_field" name="" type="text">

我搜索了很多解决方案，但我发现只能改变输入字段本身的背景。

Answer 1

如果使用jquery：

$('.search_field').on('input', function() {
   $('.target-bg').css('background-color','green');
});

Answer 2

这是使用普通javascript的解决方案

＆＃13;

＆＃13;

var bgElement = document.querySelector('.target_bg');
var input = document.querySelector('.search_field');

input.oninput = function() { bgElement.style.background = 'green'; };

＆＃13;

.target_bg {
  width: 50px;
  height: 50px;
  background: red;
}

＆＃13;

<div class="target_bg"></div>
<input placeholder="Search for Restaurants..." class="search_field" name="" type="text">

＆＃13;

＆＃13;

＆＃13;