我正在做我自己的搜索框，代碼如下：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>而且這段代碼運行得很好，但是為什么只有在第二次點擊鍵盤后才會出現(xiàn)該按鈕。
3 回答
POPMUISE
TA貢獻1765條經(jīng)驗 獲得超5個贊
您需要使用 keyup 作為事件監(jiān)聽器，而不是 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 所指出的，如果將文本拖動到輸入字段中，則不會觸發(fā)此操作。如果需要，請使用輸入作為事件。
翻翻過去那場雪
TA貢獻2065條經(jīng)驗 獲得超14個贊
只需使用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>
此外，如果您將標(biāo)記的文本拖到輸入中，這甚至可以工作。
紅顏莎娜
TA貢獻1842條經(jīng)驗 獲得超13個贊
這是因為您在更改之前檢查了該值。
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');
}
})
發(fā)生了什么：
您按下鍵盤上的 A 鍵。
瀏覽器檢測到已按下按鈕。
事情發(fā)生得如此之快，以至于當(dāng)瀏覽器獲取到這個值時：什么都沒有時間改變，你的手指仍然在你的 A 鍵上。
由于您在計算密鑰字母之前檢查了該值，因此該值并未更改。您只需在 keyup 處添加一個偵聽器，然后奇跡就會發(fā)生。:)
你按A鍵。
您的手指正在離開按鍵（其值在 .header-search 輸入中計算）。
瀏覽器檢測到按鍵操作。
瀏覽器檢查此值：該值有時間根據(jù)您按下的內(nèi)容和鍵盤進行更改！
- 3 回答
- 0 關(guān)注
- 170 瀏覽
添加回答
舉報
0/150
提交
取消