keydown 直到按键两次才触发

Question

所以我有一个 div 我试图切换 class 取决于另一个 div 是否为空。

当前按下键时按下键没有任何反应，然后当按下第二个键时，显示样式切换为无。

这与在 div 中删除文本时相同，当 div 为空时它不会切换回显示块，但是当再次按下退格键时（一旦已经为空），则显示值会更改回块。

有什么想法吗？

HTML

  <div id="textbox">
    <div id="colon" class="consoleText consoleArea"><span class="consoleIcons">&#10132;</span></div>
    <div role="textbox" contenteditable="true" id="navtype" class="consoleText" tabindex="0" style="margin-left: 40px" onkeypress="return (this.innerText.length <= 37)" onpaste="return false;" spellcheck="false"></div>
    <div class="consoleText"><span id="caret"></span></div>
    <div class="placeholder">type here to change directory</div>
  </div>

JavaScript

let consoleMsg = document.getElementById("navtype");

let consoleText = document.querySelector("[contenteditable]");

consoleText.onkeydown = function () {
if (consoleText.innerText) {
    let placeholder = document.querySelector(".placeholder");
    placeholder.style.display = "none";
  } else {
    let placeholder = document.querySelector(".placeholder");
    placeholder.style.display = "block";
  }
};

Answer 1

if(consoleText.innerHTML !== null || consoleText.innerHTML !== "" || consoleText.innerHTML !== undefined) {
   let placeholder = document.querySelector(".placeholder");
   placeholder.style.display = "block";
} else {
  let placeholder = document.querySelector(".placeholder");
  placeholder.style.display = "none";
}

检查 DIV 内容的最佳方法是 innerHTML。 您的代码应该监听 triggeringElement.innerHTML 而不是 keydown 事件。 如果输入元素是 go 为 triggeringElement.value。

Answer 2

问题是 using.onkeydown - 我应该使用的是.oninput -

.onkeydown 似乎有延迟 function 在添加输入之前被触发。