在搜索十字图标上运行功能答案

【问题标题】：Run function on search cross icon在搜索十字图标上运行功能
【发布时间】：2020-10-14 20:15:50
【问题描述】：

当我单击在搜索字段中键入内容时出现的十字图标时，如何运行 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;
}

&lt;input type="search" id="search_input" placeholder="Search" title="Cancel"&gt;

【问题讨论】：

标签： javascript html css

【解决方案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');
  }
});

【讨论】：

【解决方案2】：

十字图标只是来自浏览器的样式，不能通过 JavaScript 选择。但是，您可以通过组合 <input type="text"> 和 <button type="button"></button> 元素来创建自己的 <input type="search"> 元素版本。

然后，您将可以控制单击十字图标时发生的情况。下面的示例模拟了搜索元素的行为，但可以修改为在单击十字图标时执行任何操作。

const searchInput = document.querySelector('.search-input');
const input = searchInput.querySelector('input');
const button = searchInput.querySelector('button');

input.addEventListener('input', event => {
  input.classList.toggle('has-value', event.target.value !== '');
});

button.addEventListener('click', () => {
  input.classList.remove('has-value');
  input.value = '';
  console.log('cross clicked');
});

.search-input {
  display: inline-flex;
  border: 1px solid #d0d0d0;
  border-radius: 4px;
  padding: 5px;
}

.search-input > input,
.search-input > button {
  border: 0;
}

.search-input > button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin: 0 0 0 5px;
  border-radius: 50%;
  line-height: 0;
  pointer-events: none;
  cursor: pointer;
  opacity: 0;
  transition: opacity 150ms ease-in-out;
}

.search-input > input.has-value + button {
  pointer-events: all;
  opacity: 1; 
}

<div class="search-input">
  <input type="text" name="search" placeholder="Search"/>
  <button type="button">&times;</button>
</div>

【讨论】：

【解决方案3】：

您可以通过将 onclick 属性添加到 search_input 元素来使脚本在单击输入时运行。

document.getElementById('search_input').onclick = function clickCancel() {
  console.log('clicked');
}

#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;
}

&lt;input type="search" id="search_input" placeholder="Search" title="Cancel"&gt;

【讨论】：

有可能用户想要编辑一些东西，他/她必须点击文本字段，如果我们使用 onclick 函数，事件会触发，但我们不希望我们希望事件在单击十字按钮时运行