javascript - 在搜索十字图标上运行功能

Question

当我单击在搜索字段中键入内容时出现的十字图标时，如何运行 javascript 函数。

#search_input {
    width: 20rem;
    outline: none;
    padding: 0.5rem 1.5rem;
    font-size: 1rem;
    border-radius: 0.4rem;
}

#search_input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    height: 1em;
    width: 1em;
    border-radius: 50em;
    background: url("https://pro.fontawesome.com/releases/v5.10.0/svgs/solid/times-circle.svg") no-repeat 50% 50%;
    background-size: contain;
    opacity: 0;
}

#search_input::-webkit-search-cancel-button:hover {
    cursor: pointer;
}

#search_input:focus::-webkit-search-cancel-button {
    opacity: .3;
}

<input type="search" id="search_input" placeholder="Search" title="Cancel">

Answer 1

点击十字图标重置输入，所以我猜你可以收听事件input一旦触发此事件，请检查:

如果输入为空

该事件没有 inputType属性(这是您键入包括删除在内的键时的情况)

这是代码的样子

const search = document.getElementById('search_input');

search.addEventListener('input', evt => {
    if(!evt.inputType && search.value === ''){
    console.log('search input has been cleared');
  }
});