chrome下判斷點(diǎn)擊input上標(biāo)簽還是其余標(biāo)簽的實(shí)現(xiàn)方法
想要實(shí)現(xiàn)的功能:當(dāng)input框失焦且點(diǎn)擊的不是清除鍵時(shí),執(zhí)行reset方法重置input樣式,當(dāng)點(diǎn)擊清除鍵時(shí),執(zhí)行clear方法,清除input內(nèi)容。
如圖
本想通過(guò)如下代碼來(lái)實(shí)現(xiàn)
$(".search-input").focusout(function () { if (document.activeElement.className !== 'close-t') {//close-t為清除鍵類名 $('.search-input').addClass('search-before'); $('.close').css('display', 'none'); document.getElementById('search').value = ''; } });
以外的發(fā)現(xiàn),當(dāng)inpu框失焦后,首先獲得焦點(diǎn)的,竟是body標(biāo)簽,也因?yàn)檫@樣,該方法失效了,最后采用以下代碼來(lái)實(shí)現(xiàn)的該功能
$("#search").focusout(function () { //判斷失焦后是否點(diǎn)擊的是清除鈕,若是則不重置 var tapCloseButton = false; $('.close-t').focus(function () { tapCloseButton = true; }); setTimeout(function () { if (!tapCloseButton) { $('.search-input').addClass('search-before'); $('.close').css('display', 'none'); document.getElementById('search').value = ''; } },10); });
將焦點(diǎn)判斷這一步驟延遲執(zhí)行,故此時(shí)焦點(diǎn)已經(jīng)從body上移到了真正所點(diǎn)擊的元素上,此時(shí)再對(duì)焦點(diǎn)進(jìn)行判斷,看是否為清除鍵。
以上這篇chrome下判斷點(diǎn)擊input上標(biāo)簽還是其余標(biāo)簽的實(shí)現(xiàn)方法就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
淺談JavaScript中Date(日期對(duì)象),Math對(duì)象
這篇文章主要簡(jiǎn)單介紹了JavaScript中Date(日期對(duì)象),Math對(duì)象的相關(guān)資料,需要的朋友可以參考下2015-02-02編寫跨瀏覽器的javascript代碼必備[js多瀏覽器兼容寫法]
下面比較了幾種瀏覽器之間的差異,在寫javascript代碼時(shí) 要時(shí)刻注意這些差異2008-10-10jquery中validate與form插件提交的方式小結(jié)
這篇文章主要介紹了jquery中validate與form插件提交的方式小結(jié),需要的朋友可以參考下2016-03-03JS中用三種方式實(shí)現(xiàn)導(dǎo)航菜單中的二級(jí)下拉菜單
我們?cè)谔詫?、搜狐等大型網(wǎng)站上都可以看到使用的一些二級(jí)下拉菜單,比如下面這張圖片。那么如何實(shí)現(xiàn)導(dǎo)航菜單欄中的二級(jí)下拉菜單呢?下面小編給大家分享JS中用三種方式實(shí)現(xiàn)導(dǎo)航菜單中的二級(jí)下拉菜單,感興趣的朋友一起看看吧2016-10-10Web?Components使用生命周期回調(diào)函數(shù)實(shí)例詳解
這篇文章主要為大家介紹了Web?Components使用生命周期回調(diào)函數(shù)實(shí)例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-10-10javascript頁(yè)面加載完執(zhí)行事件代碼
本篇文章主要是對(duì)javascript頁(yè)面加載完執(zhí)行事件的代碼進(jìn)行了介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2014-02-02