先來一段引子,最近在寫手機h5頁面,主要是一些登陸註冊方面的,最繞不開的就是表單元素。
我想實現的是:在輸入框後邊有一個刪除圖標,當輸入東西的時候觸發事件,顯示刪除圖標,點擊該圖標會刪除之前輸入的內容,離開輸入框,該圖示消失。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
|
之前的預想是:為輸入框添加focus和blur事件;
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
|
但是遇到了問題:當我輸入後點擊刪除圖標,同時也觸發了blur事件,此時圖示消失,也就點擊不到圖示了,但是如果不在blur時讓圖示消失,則每一次輸入完成後input失去焦點,圖示就一直顯示著。
這個問題向個梗,一直卡著,直到今天。 。 。我又遇到了另一個問題! !
問題描述:當我在輸入框輸入內容後,直接點擊註冊按鈕,第一次點擊,沒反應,每次都是焦點在input時點擊button,需要點擊兩次,button才會有所反應;
這時我才意識到,這是blur搶佔了click的風頭,那麼我就得去blur裡找問題,果然,如果我給blur的執行加一個延時. ....
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
|
萬事大吉,一下子世界都安靜了。 。 。
然後就沒有然後了,連之前的刪除小圖示也聽話了,一blur就能隱藏,可是我的js程式碼重複程式碼非常之多,如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
|
並且,我甚至不知道第一個問題是怎麼被解決的,在此也想向大家請教一下,為什麼加一個定時之後,我再用$(this)就取不到當前的對象,必須得像$( "#person")這樣重新取,導致我還得為每一個input添加一個blur事件,不能集中處理,或者,其實這段程式碼是可以簡化的,只是我還沒想到。 。 。也請各方同學多多指教。
以上是input的blur事件與button的click事件詳細介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!