首頁猿問在搜索十字圖標上運行功能

在搜索十字圖標上運行功能

JavaScript

慕的地6264312 2023-05-11 13:59:10

單擊在搜索字段中鍵入內容時出現的十字圖標時，如何運行 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">

查看完整描述

3 回答

jeck貓

TA貢獻1909條經驗獲得超7個贊

單擊十字圖標會重置輸入，所以我想您可以收聽事件input，一旦觸發此事件，請檢查：

如果輸入為空
該事件沒有屬性inputType（當您鍵入包括刪除的鍵時就是這種情況）

這是代碼的樣子

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

search.addEventListener('input', evt => {

if(!evt.inputType && search.value === ''){

console.log('search input has been cleared');

}

});

反對回復 2023-05-11

倚天杖

TA貢獻1828條經驗獲得超3個贊

十字圖標只是來自瀏覽器的樣式，無法通過 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>

反對回復 2023-05-11

幕布斯6054654

TA貢獻1876條經驗獲得超7個贊

您可以通過向元素添加 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;

}

反對回復 2023-05-11

3 回答
0 關注
170 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

在搜索十字圖標上運行功能

在搜索十字圖標上運行功能

3 回答

添加回答