chrome下判斷點擊input上標簽還是其余標簽的實現(xiàn)方法
更新時間：2016年09月18日 12:00:50 投稿：jingxian
下面小編就為大家?guī)硪黄猚hrome下判斷點擊input上標簽還是其余標簽的實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
想要實現(xiàn)的功能：當input框失焦且點擊的不是清除鍵時，執(zhí)行reset方法重置input樣式，當點擊清除鍵時，執(zhí)行clear方法，清除input內(nèi)容。
如圖
本想通過如下代碼來實現(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)，當inpu框失焦后，首先獲得焦點的，竟是body標簽，也因為這樣，該方法失效了，最后采用以下代碼來實現(xiàn)的該功能
$("#search").focusout(function () {
//判斷失焦后是否點擊的是清除鈕，若是則不重置
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);
});
將焦點判斷這一步驟延遲執(zhí)行，故此時焦點已經(jīng)從body上移到了真正所點擊的元素上，此時再對焦點進行判斷，看是否為清除鍵。
以上這篇chrome下判斷點擊input上標簽還是其余標簽的實現(xiàn)方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Javascript實現(xiàn)單張圖片瀏覽，非常的簡單，是學習javascript時練手用的，跟我一樣的菜鳥看看吧，大神請略過2014-12-12
js與jQuery實現(xiàn)的用戶注冊協(xié)議倒計時功能實例【三種方法】
這篇文章主要介紹了js與jQuery實現(xiàn)的用戶注冊協(xié)議倒計時功能,結(jié)合實例形式分析了三種倒計時功能的相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2017-11-11
初學者不建議看，這些都是用類實現(xiàn)的代碼，高手推薦學習2008-10-10
JS實現(xiàn)1000以內(nèi)被3或5整除的數(shù)字之和
今天在技術(shù)群里看到一道這樣的提：求1000以內(nèi)被3或5整除的數(shù)字之和。小編把我的解決辦法分享到腳本之家平臺，供大家參考2016-02-02
這篇文章主要介紹了HTML中使背景圖片自適應瀏覽器大小實例詳解的相關(guān)資料,需要的朋友可以參考下2017-04-04
之前發(fā)了不少了去除字符串空格的代碼，但都是去除開始與結(jié)尾的，下面的這段代碼可以去除中間的。2009-08-08
這篇文章主要為大家介紹了big.js?如何解決精度丟失問題源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-10-10
我們在使用移動、電信等運營商網(wǎng)上營業(yè)廳的時候，為確保業(yè)務的完整和正確性，經(jīng)常會需要用到短信的驗證碼。最近因為某省業(yè)務需要，也做了個類似的功能2016-01-01
有時候頁面中的正文一般都加上了字體大中小控制代碼，方便瀏覽者閱讀。2010-09-09
這篇文章主要介紹了js中關(guān)于Blob對象的介紹與使用，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-11-11