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

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 => {&nbsp; &nbsp; if(!evt.inputType && search.value === ''){&nbsp; &nbsp; console.log('search input has been cleared');&nbsp; }});

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 => {&nbsp; input.classList.toggle('has-value', event.target.value !== '');});button.addEventListener('click', () => {&nbsp; input.classList.remove('has-value');&nbsp; input.value = '';&nbsp; console.log('cross clicked');});.search-input {&nbsp; display: inline-flex;&nbsp; border: 1px solid #d0d0d0;&nbsp; border-radius: 4px;&nbsp; padding: 5px;}.search-input > input,.search-input > button {&nbsp; border: 0;}.search-input > button {&nbsp; display: flex;&nbsp; align-items: center;&nbsp; justify-content: center;&nbsp; width: 20px;&nbsp; height: 20px;&nbsp; margin: 0 0 0 5px;&nbsp; border-radius: 50%;&nbsp; line-height: 0;&nbsp; pointer-events: none;&nbsp; cursor: pointer;&nbsp; opacity: 0;&nbsp; transition: opacity 150ms ease-in-out;}.search-input > input.has-value + button {&nbsp; pointer-events: all;&nbsp; opacity: 1;&nbsp;}<div class="search-input">&nbsp; <input type="text" name="search" placeholder="Search"/>&nbsp; <button type="button">&times;</button></div>

Answer 3

您可以通过向元素添加 onclick 属性来使脚本在单击输入时运行search_input。document.getElementById('search_input').onclick = function clickCancel() {&nbsp; console.log('clicked');}#search_input {&nbsp; width: 20rem;&nbsp; outline: none;&nbsp; padding: 0.5rem 1.5rem;&nbsp; font-size: 1rem;&nbsp; border-radius: 0.4rem;}#search_input::-webkit-search-cancel-button {&nbsp; -webkit-appearance: none;&nbsp; height: 1em;&nbsp; width: 1em;&nbsp; border-radius: 50em;&nbsp; background: url("https://pro.fontawesome.com/releases/v5.10.0/svgs/solid/times-circle.svg") no-repeat 50% 50%;&nbsp; background-size: contain;&nbsp; opacity: 0;}#search_input::-webkit-search-cancel-button:hover {&nbsp; cursor: pointer;}#search_input:focus::-webkit-search-cancel-button {&nbsp; opacity: .3;}<input type="search" id="search_input" placeholder="Search" title="Cancel">