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

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');

  }

});

Answer 2

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

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

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>

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

}

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