第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全，請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題，去搜搜看，總會(huì)有你想問的

在搜索十字圖標(biāo)上運(yùn)行功能

在搜索十字圖標(biāo)上運(yùn)行功能

慕的地6264312 2023-05-11 13:59:10
單擊在搜索字段中鍵入內(nèi)容時(shí)出現(xiàn)的十字圖標(biāo)時(shí)，如何運(yùn)行 javascript 函數(shù)。#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貢獻(xiàn)1909條經(jīng)驗(yàn) 獲得超7個(gè)贊

單擊十字圖標(biāo)會(huì)重置輸入，所以我想您可以收聽事件input，一旦觸發(fā)此事件，請(qǐng)檢查：

  • 如果輸入為空

  • 該事件沒有屬性inputType（當(dāng)您鍵入包括刪除的鍵時(shí)就是這種情況）

這是代碼的樣子

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


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

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

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

  }

});


查看完整回答
反對(duì) 回復(fù) 2023-05-11
?
倚天杖

TA貢獻(xiàn)1828條經(jīng)驗(yàn) 獲得超3個(gè)贊

十字圖標(biāo)只是來自瀏覽器的樣式，無法通過 JavaScript 選擇。<input type="search">但是，您可以通過組合 a<input type="text">和 a元素來創(chuàng)建您自己的元素版本<button type="button"></button>。


然后，您將可以控制單擊十字圖標(biāo)時(shí)發(fā)生的情況。下面的示例模仿了搜索元素的行為，但可以修改為在單擊十字圖標(biāo)時(shí)執(zhí)行您想要的任何操作。


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>


查看完整回答
反對(duì) 回復(fù) 2023-05-11
?
幕布斯6054654

TA貢獻(xiàn)1876條經(jīng)驗(yàn) 獲得超7個(gè)贊

您可以通過向元素添加 onclick 屬性來使腳本在單擊輸入時(shí)運(yùn)行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">


查看完整回答
反對(duì) 回復(fù) 2023-05-11
  • 3 回答
  • 0 關(guān)注
  • 179 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

 公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)