Keydown 与第二次键盘点击一起使用

Question

我正在做我自己的搜索框，代码如下：

document.querySelector('.header-search input').addEventListener('keydown', function() {

  if (this.value === "") {

    document.querySelector('.header-search-reset').classList.remove('reset');

  } else {

    document.querySelector('.header-search-reset').classList.add('reset');

  }

})

document.querySelector('.header-search-reset').addEventListener('click', function() {

  document.querySelector('.header-search input').value = "";

  this.classList.remove('reset');

})

input {

  border: 1px solid #000;

}

.header-search input::-ms-clear {

  display: none;

}

.header-search-reset {

  cursor: pointer;

  opacity: 0;

  visibility: hidden;

  transition: opacity .2s, visibility .2s;

}

.header-search-reset.reset {

  opacity: 1;

  visibility: visible;

}

<div class="header-search">

  <input type="text" placeholder="Search">

  <button type="button" class="header-search-reset">X</button>

</div>

而且这段代码运行得很好，但是为什么只有在第二次点击键盘后才会出现该按钮。

Answer 1

您需要使用 keyup 作为事件监听器，而不是 keydown。否则，您的 this.value 在第一次击键后为空。检查控制台日志。document.querySelector('.header-search input').addEventListener('keyup', function() {&nbsp; console.log(this.value)&nbsp; if (this.value === "") {&nbsp; &nbsp; document.querySelector('.header-search-reset').classList.remove('reset');&nbsp; } else {&nbsp; &nbsp; document.querySelector('.header-search-reset').classList.add('reset');&nbsp; }})document.querySelector('.header-search-reset').addEventListener('click', function() {&nbsp; document.querySelector('.header-search input').value = "";&nbsp; this.classList.remove('reset');})input {&nbsp; border: 1px solid #000;}.header-search input::-ms-clear {&nbsp; display: none;}.header-search-reset {&nbsp; cursor: pointer;&nbsp; opacity: 0;&nbsp; visibility: hidden;&nbsp; transition: opacity .2s, visibility .2s;}.header-search-reset.reset {&nbsp; opacity: 1;&nbsp; visibility: visible;}<div class="header-search">&nbsp; <input type="text" placeholder="Search">&nbsp; <button type="button" class="header-search-reset">X</button></div>但是：正如 connexo 所指出的，如果将文本拖动到输入字段中，则不会触发此操作。如果需要，请使用输入作为事件。

Answer 2

只需使用input事件代替keydown（因为输入的值仅在侦听器被处理后才会更改keydown）keypressed：document.querySelector('.header-search input').addEventListener('input', function() {&nbsp; if (this.value === "") {&nbsp; &nbsp; document.querySelector('.header-search-reset').classList.remove('reset');&nbsp; } else {&nbsp; &nbsp; document.querySelector('.header-search-reset').classList.add('reset');&nbsp; }})document.querySelector('.header-search-reset').addEventListener('click', function() {&nbsp; document.querySelector('.header-search input').value = "";&nbsp; this.classList.remove('reset');})input {&nbsp; border: 1px solid #000;}.header-search input::-ms-clear {&nbsp; display: none;}.header-search-reset {&nbsp; cursor: pointer;&nbsp; opacity: 0;&nbsp; visibility: hidden;&nbsp; transition: opacity .2s, visibility .2s;}.header-search-reset.reset {&nbsp; opacity: 1;&nbsp; visibility: visible;}<div class="header-search">&nbsp; <input type="text" placeholder="Search">&nbsp; <button type="button" class="header-search-reset">X</button></div>此外，如果您将标记的文本拖到输入中，这甚至可以工作。

Answer 3

这是因为您在更改之前检查了该值。document.querySelector('.header-search input').addEventListener('keydown', function() {&nbsp; if (this.value === "") {&nbsp; &nbsp; document.querySelector('.header-search-reset').classList.remove('reset');&nbsp; } else {&nbsp; &nbsp; document.querySelector('.header-search-reset').classList.add('reset');&nbsp; }})发生了什么：您按下键盘上的 A 键。浏览器检测到已按下按钮。事情发生得如此之快，以至于当浏览器获取到这个值时：什么都没有时间改变，你的手指仍然在你的 A 键上。由于您在计算密钥字母之前检查了该值，因此该值并未更改。您只需在 keyup 处添加一个侦听器，然后奇迹就会发生。:)你按A键。您的手指正在离开按键（其值在 .header-search 输入中计算）。浏览器检测到按键操作。浏览器检查此值：该值有时间根据您按下的内容和键盘进行更改！