Run function on search cross icon

user_13969650 0
Viewed 732

How can I run a javascript function when I click on the cross icon which appears when we type something in the search field.

#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">

css html javascript
3 Answers

Clicking the cross icon reset the input, so I guess you can listen to event input and once this event is fired check:

  • if the input is empty
  • the event doesn't have a inputType property (this is a case when you type a key including delete)

Here is what the code would look like

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

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

The cross icon is merely styling coming from the browser and is not selectable through JavaScript. You could however create your own version of a <input type="search"> element by combining a <input type="text"> and a <button type="button"></button> element.

Then you'll have control over what happens when clicking the cross icon. The example below mimics the behavior of the search element, but can be modified to do whatever you want when clicking the cross icon.

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>

user_116196470

You can make the script run when clicked on the input by adding an onclick attribute to search_input element.

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

user_70043880
Related