如何使用 :after 元素清除输入答案

【问题标题】：How to clear input with :after element如何使用 :after 元素清除输入
【发布时间】：2016-04-17 21:04:32
【问题描述】：

看看this website。有 2 个搜索栏，每个搜索栏后都有一个 :after 元素。当您单击该元素时，文本框将被清除。我怎样才能用 Javascript 做到这一点？（没有 jquery）

【问题讨论】：

你试过了吗？
就像@Oriol 和@Nick 所说的那样。 event listener 在 element 上。伪元素是current element 的一部分。它不是在元素之后插入，而是在它的内容之后，在当前元素的范围内，并且可以用边距设置样式...看起来像在外面

【解决方案1】：

You can't add event listeners to pseudo-elements。但是这里的元素除了伪元素之外没有其他内容，所以你可以给元素添加事件监听器。

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>

【讨论】：

【解决方案2】：

click 事件实际上不在 :after 伪元素上，而是在 span 本身上（如您所见 here）伪元素只是提供图标，这里没什么特别的。然后就是做这样的事情；

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

【讨论】：

【解决方案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/

【讨论】：