javascript - 如何使用 :after element 清除输入

Question

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

Answer 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>