在輸入字段中輸入文本時，是否可以更改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的解決方案

 var bgElement = document.querySelector('.target_bg'); var input = document.querySelector('.search_field'); input.oninput = function() { bgElement.style.background = 'green'; }; 

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

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