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-10
jquery中validate與form插件提交的方式小結(jié)
這篇文章主要介紹了jquery中validate與form插件提交的方式小結(jié),需要的朋友可以參考下2016-03-03
JS中用三種方式實(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-10
Web?Components使用生命周期回調(diào)函數(shù)實(shí)例詳解
這篇文章主要為大家介紹了Web?Components使用生命周期回調(diào)函數(shù)實(shí)例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-10-10
javascript頁(yè)面加載完執(zhí)行事件代碼
本篇文章主要是對(duì)javascript頁(yè)面加載完執(zhí)行事件的代碼進(jìn)行了介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2014-02-02

