向输入框添加事件监听器并检查它是否为空

Question

我正在尝试向我的输入框添加一个事件侦听器，以检查它是否为空。如果为空则隐藏

autoComplete-Box-id

。但是当我加载页面并且输入框为空时，它显示的是该元素。我该如何解决这个问题？

HTML：

        <span>
          <input id="originInput" style="width: 350px;" name="origin" type="text" placeholder="Origin">
        </span>
        <div id="autoComplete-Box-id"></div>
        <br>
        <br>
        <br>
        <br>
        <br>
        <span>
          <input style="width: 350px;" name="destination" type="text" placeholder="Destination">
        </span>
      </form>`

JS：

    let getOriginInput = document.getElementById("originInput");

    getOriginInput.addEventListener("input", function(e) {
      
      console.log(e.target.value.length);
  
      if(e.target.value == ""){
        let autoCompleteBox = document.getElementById("autoComplete-Box-id");
        autoCompleteBox.style.display="none";
      }else{
        let autoCompleteBox = document.getElementById("autoComplete-Box-id");
        autoCompleteBox.style.display="";
      }
    });

CSS：

#autoComplete-Box-id{
  width: 350px;
  height: 150px;
  background-color: gray;
}

我尝试检查

e.target.value.length

并尝试查看长度是否为

= 0

。如果是这样，我将能够使元素在加载时消失并在框中有输入时重新出现。

Answer 1

尝试使用“按键”事件。