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() {

  console.log(this.value)

  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>

但是：正如 connexo 所指出的，如果将文本拖动到输入字段中，则不会触发此操作。如果需要，请使用输入作为事件。

Answer 2

只需使用input事件代替keydown（因为输入的值仅在侦听器被处理后才会更改keydown）keypressed：

document.querySelector('.header-search input').addEventListener('input', 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 3

这是因为您在更改之前检查了该值。

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');

  }

})

发生了什么：

• 您按下键盘上的 A 键。

• 浏览器检测到已按下按钮。

• 事情发生得如此之快，以至于当浏览器获取到这个值时：什么都没有时间改变，你的手指仍然在你的 A 键上。

由于您在计算密钥字母之前检查了该值，因此该值并未更改。您只需在 keyup 处添加一个侦听器，然后奇迹就会发生。:)

• 你按A键。

• 您的手指正在离开按键（其值在 .header-search 输入中计算）。

• 浏览器检测到按键操作。

• 浏览器检查此值：该值有时间根据您按下的内容和键盘进行更改！