我正在做我自己的搜索框，代碼如下：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>而且這段代碼運(yùn)行得很好，但是為什么只有在第二次點(diǎn)擊鍵盤后才會(huì)出現(xiàn)該按鈕。
3 回答
POPMUISE
TA貢獻(xiàn)1765條經(jīng)驗(yàn) 獲得超5個(gè)贊
您需要使用 keyup 作為事件監(jiān)聽器，而不是 keydown。否則，您的 this.value 在第一次擊鍵后為空。檢查控制臺(tái)日志。
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 所指出的，如果將文本拖動(dòng)到輸入字段中，則不會(huì)觸發(fā)此操作。如果需要，請(qǐng)使用輸入作為事件。
翻翻過去那場(chǎng)雪
TA貢獻(xiàn)2065條經(jīng)驗(yàn) 獲得超14個(gè)贊
只需使用input事件代替keydown（因?yàn)檩斎氲闹祪H在偵聽器被處理后才會(huì)更改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貢獻(xiàn)1842條經(jīng)驗(yàn) 獲得超13個(gè)贊
這是因?yàn)槟诟闹皺z查了該值。
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 鍵。
瀏覽器檢測(cè)到已按下按鈕。
事情發(fā)生得如此之快，以至于當(dāng)瀏覽器獲取到這個(gè)值時(shí)：什么都沒有時(shí)間改變，你的手指仍然在你的 A 鍵上。
由于您在計(jì)算密鑰字母之前檢查了該值，因此該值并未更改。您只需在 keyup 處添加一個(gè)偵聽器，然后奇跡就會(huì)發(fā)生。:)
你按A鍵。
您的手指正在離開按鍵（其值在 .header-search 輸入中計(jì)算）。
瀏覽器檢測(cè)到按鍵操作。
瀏覽器檢查此值：該值有時(shí)間根據(jù)您按下的內(nèi)容和鍵盤進(jìn)行更改！
- 3 回答
- 0 關(guān)注
- 157 瀏覽
添加回答
舉報(bào)
0/150
提交
取消