如何使用：after元素清除輸入

Question

看看這個網站 。 有2個搜索欄，每個搜索欄后面都有一個:after元素。 當您單擊該元素時，將清除文本框。 如何使用Javascript完成此操作？ （沒有jQuery）

Answer 1

您不能將事件偵聽器添加到偽元素 。 但是這里元素除了偽元素之外沒有其他內容，因此您可以將事件偵聽器添加到元素中。

 var input = document.getElementById('input'); document.getElementById('clear').addEventListener('click', function() { input.value = ''; }); 

 #clear::after { content: '\\00d7'; cursor: pointer; } 

 <input id="input" value="Hello" /> <span id="clear" title="Clear"></span> 

Answer 2

click事件實際上不在：after偽元素上，而是在span本身上（如您在此處看到的）偽元素僅提供圖標，在這里沒有任何幻想。 然后，要做這樣的事情就可以了。

element.addEventListener('click', function() {
  document.getElementById('startInput').value = '';
}, false);

Answer 3

我認為這沒什么特別的。 像這樣：

var elementList = document.getElementsByClassName('something');
for (var i = 0; i < elementList.length; i++) {
   elementList[i].addEventListener("click", delFn);
}


function delFn(){
console.log("delete it");
}

https://jsfiddle.net/5w4obgzu/1/