真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

如何解決Js先觸發(fā)失去焦點(diǎn)事件再執(zhí)行點(diǎn)擊事件的問題

這篇文章主要介紹了如何解決Js先觸發(fā)失去焦點(diǎn)事件再執(zhí)行點(diǎn)擊事件的問題,具有一定借鑒價(jià)值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。

創(chuàng)新互聯(lián)是創(chuàng)新、創(chuàng)意、研發(fā)型一體的綜合型網(wǎng)站建設(shè)公司,自成立以來公司不斷探索創(chuàng)新,始終堅(jiān)持為客戶提供滿意周到的服務(wù),在本地打下了良好的口碑,在過去的10多年時(shí)間我們累計(jì)服務(wù)了上千家以及全國政企客戶,如垃圾桶等企業(yè)單位,完善的項(xiàng)目管理流程,嚴(yán)格把控項(xiàng)目進(jìn)度與質(zhì)量監(jiān)控加上過硬的技術(shù)實(shí)力獲得客戶的一致贊揚(yáng)。

最近在做公司的某個(gè)從項(xiàng)目,基本設(shè)計(jì)和淘寶登陸頁類似:

1)文本框內(nèi)容為空是,文本框右側(cè)無清除按鈕,當(dāng)有內(nèi)容時(shí)立即顯示清除按鈕;

2)當(dāng)文本框失去焦點(diǎn)時(shí),清除按鈕消失,獲取焦點(diǎn)時(shí)若文本框內(nèi)有內(nèi)容,則顯示清除按鈕,否則不顯示;

3)文本框再有內(nèi)容且獲取焦點(diǎn)的情況下,點(diǎn)擊清除按鈕,文本框內(nèi)容置空,且清除按鈕消失。

隨后想了想,感覺是個(gè)很簡單的需求,只要結(jié)合使用keyup和blur以及click時(shí)間就可以解決了,然而,結(jié)果卻不是我想要的,代碼如下:

html代碼:


 
 

js代碼:

//綁定監(jiān)聽手機(jī)號(hào)文本框內(nèi)容按鈕事件
$('#mobile').keyup(function() {
 var clearBtn = $(this).parent().find('.icon-clear');
 if($(this).val() == '') { clearBtn.hide(); } 
 else { clearBtn.css('display', 'table-cell'); }
});
//手機(jī)號(hào)輸入框失去焦點(diǎn),去除清除按鈕;獲取焦點(diǎn)時(shí),若有值則顯示清除按鈕
$('#mobile').blur(function() {
 $('#mobile').parent().find('.icon-clear').hide();
}).focus(function(){
 if($(this).val() != ''){
  $(this).parent().find('.icon-clear').css('display', 'table-cell');
 }
});
//清除文本框內(nèi)容事件
$('.icon-clear').click(function() {
 $(this).parent().find('input').val('');
 $(this).hide();
});

這樣看著像是什么問題都沒有的樣子,其實(shí)不然,運(yùn)行之后發(fā)現(xiàn),在文本框中輸入內(nèi)容后文本框獲取焦點(diǎn),這個(gè)時(shí)候我想要去點(diǎn)擊清除按鈕來清除剛才我寫的東西,發(fā)現(xiàn),文本框內(nèi)容沒有置空,清除按鈕卻先消失了,很納悶啊。

后來經(jīng)查閱發(fā)現(xiàn),是先執(zhí)行的失去焦點(diǎn)事件,那么如何去解決呢?

而后,我在失去焦點(diǎn)事件中對(duì)其中的方法進(jìn)行了延遲處理,如下所示:

//驗(yàn)證碼輸入框失去焦點(diǎn),去除清除按鈕;獲取焦點(diǎn)時(shí),若有值則顯示清除按鈕
$('#auth_code').blur(function() {
 setTimeout(function() { //進(jìn)行延時(shí)處理,時(shí)間單位為千分之一秒
  $('#auth_code').parent().find('.icon-clear').hide();
 }, 100)
}).focus(function(){
 if($(this).val() != ''){
  $(this).parent().find('.icon-clear').css('display', 'table-cell');
 }
});

如此操作后就可以完美解決了,目前未發(fā)現(xiàn)任何副作用。

感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享的“如何解決Js先觸發(fā)失去焦點(diǎn)事件再執(zhí)行點(diǎn)擊事件的問題”這篇文章對(duì)大家有幫助,同時(shí)也希望大家多多支持創(chuàng)新互聯(lián),關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,更多相關(guān)知識(shí)等著你來學(xué)習(xí)!


文章題目:如何解決Js先觸發(fā)失去焦點(diǎn)事件再執(zhí)行點(diǎn)擊事件的問題
URL地址:http://weahome.cn/article/pshipp.html

其他資訊

在線咨詢

微信咨詢

電話咨詢

028-86922220(工作日)

18980820575(7×24)

提交需求

返回頂部