Question

因此，我有两个输入字段和一些JavaScript代码，这些代码在每次按键后将当前值写入段落元素。现在，如果我们使用KeyUp事件，则所有内容都会立即更新，但是如果我们使用KeyDown，则会观察到我们仅看到第n个按键之后的最后n-1个字符。为什么会这样？

var inputOne = document.getElementById("inputOne");
var pOne = document.getElementById("pOne");
var inputTwo = document.getElementById("inputTwo");
var pTwo = document.getElementById("pTwo");

inputOne.addEventListener("keydown", event => {
  pOne.innerHTML = event.target.value;
});

inputTwo.addEventListener("keyup", event => {
  pTwo.innerHTML = event.target.value;
});

#pOne {
  border: 1px solid green;
}

#pTwo {
  border: 1px solid red;
}

<div id="exercise">
  <div>
    keydown <br> inputOne) <input id="inputOne" type="text"> pOne)
    <p id="pOne"></p>
  </div>
  <div>
    keyup <br> inputTwo) <input id="inputTwo" type="text"> pTwo)
    <p id="pTwo"></p>
  </div>
</div>

JsFiddle示例： https://jsfiddle.net/45gshtom/2/

为什么KeyDown事件落后一个字符？

0 个答案: