javascript - 聚焦时更改 div 的 css

Question

我在输入焦点时更改了 div 的 css。但我想在输入中输入字母时取消焦点的值。

那么当我在输入中输入值时如何渲染 div 的初始 css ？

为了方便起见，我创建了一个代码片段。

function setFocused() {
      var results = document.querySelectorAll('.test');
      for (result of results) {
        result.classList.add('focused');
      }
    }

    function unsetFocused() {
      var results = document.querySelectorAll('.test');
      for (result of results) {
        result.classList.remove('focused');
      }
    }

    var results = document.querySelectorAll('input[type="text"]');
    for (result of results) {
      result.addEventListener("focus", setFocused);
      result.addEventListener("blur", unsetFocused);
    }

.test.focused {
      color: red;
    }

<form>
    <input type="text"/>
</form>
    <div class="test">
        Hello
    </div>

感谢您的帮助!

Answer 1

您可以为输入(打字)添加事件监听器。在该函数上，您可以删除类。

希望这能解决问题。请找到下面的代码。

function setFocused() {
      var results = document.querySelectorAll('.test');
      for (result of results) {
        result.classList.add('focused');
      }
    }

    function unsetFocused() {
      var results = document.querySelectorAll('.test');
      for (result of results) {
        result.classList.remove('focused');
      }
    }
    
    function onChange(){
            var results = document.querySelectorAll('.test');
              result.classList.remove('test','focused');

    }

    var results = document.querySelectorAll('input[type="text"]');
    for (result of results) {
      result.addEventListener("focus", setFocused);
      result.addEventListener("blur", unsetFocused);
      result.addEventListener("input", onChange);
    }

.test.focused {
      color: red;
    }

<form>
    <input type="text"/>
</form>
    <div class="test">
        Hello
    </div>