首頁 > web前端 > js教程 > input的blur事件與button的click事件詳細介紹

input的blur事件與button的click事件詳細介紹

黄舟
發布: 2017-06-26 14:28:56
原創
2212 人瀏覽過

先來一段引子,最近在寫手機h5頁面,主要是一些登陸註冊方面的,最繞不開的就是表單元素。

我想實現的是:在輸入框後邊有一個刪除圖標,當輸入東西的時候觸發事件,顯示刪除圖標,點擊該圖標會刪除之前輸入的內容,離開輸入框,該圖示消失。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

<div class="wrapper">

    <div class="count">

        <label for="person">手机号</label>

        <input id="person" type="text" placeholder="请输入手机号">

        <i class="r btn_delete delete1"><img src="../imgs/btn_Eliminate.png"></i>

    </div>

    <div class="count">

        <label for="pwd">密    码</label>

        <input id="pwd" type="text" placeholder="6-18位,建议数字、字母、符号组合">

        <i class="r btn_delete delete2"><img src="../imgs/btn_Eliminate.png"></i>

        <i class="r hide_switch"><img src="../imgs/btn_display_switch.png"></i>

    </div>

    <div class="confirm">

        <label for="msg">短信验证码</label>

        <input id="msg" type="text" placeholder="请输入短信验证码">

        <i class="r btn_delete delete3"><img src="../imgs/btn_Eliminate.png"></i>

        <button class="r receive_msg">获取验证码</button>

    </div></div><div class="log">     <button class="btn_register">立即注册</button></div>

登入後複製

之前的預想是:為輸入框添加focus和blur事件;

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

$("#person, #modify_name").focus(function(event) {

        event.preventDefault();

        $(this).prev().css("color", "#f68121");        if ($(this).val() === person_val) {

            $(this).val("").css("color", "#000").keyup(function() {

                $(".btn_delete").css("visibility", "visible").bind("click", function(event) {

                    event.preventDefault();

                    $("#person").val("").focus();

                    $(".btn_delete").css("visibility", "hidden");

                });

            });

        }

    });

 

    $("#person, modify_name").blur(function(event) {

        event.preventDefault();        //$(".btn_delete").css("visibility", "hidden");

        $(this).prev().css("color", "#000");        if ($(this).val() === "") {

            $(this).css("color", "#acacac").val(person_val);

        }   

    });

登入後複製

但是遇到了問題:當我輸入後點擊刪除圖標,同時也觸發了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

$("#person, #pwd, #msg, #mail").focus(function(event) {

        event.preventDefault();       

        if ($(this).attr("placeholder") === person_plc) {

            that = $(this);

        } else if ($(this).attr("placeholder") === pwd_plc) {

            that = $(this);

        } else {

            that = $(this);

        }

 

        that.prev().css("color", "#f68121");

        that.css("color", "#000").keyup(function() {

            that.next(".btn_delete").css("visibility", "visible").bind("click", function(event) {

                $(this).prev().css("color", "#acacac").val("").blur().prev().css("color", "#000");

                $(".btn_delete").css("visibility", "hidden");

            });

        });

    })

 

    $("#person").blur(function(event) {

        event.preventDefault();

        setTimeout(function() {            // console.log("blur");

            $(".btn_delete").css("visibility", "hidden");

            $("#person").prev().css("color", "#000");

            if ($("#person").val() === "") {

                 $("#person").css("color", "#acacac");

             }

        }, 100);

    });

登入後複製

萬事大吉,一下子世界都安靜了。 。 。

然後就沒有然後了,連之前的刪除小圖示也聽話了,一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

var person_val = $("#person").val();    var person_plc = $("#person").attr("placeholder");    var pwd_plc = $("#pwd").attr("placeholder");    var that;

 

    $("#person, #pwd, #msg, #mail").focus(function(event) {

        event.preventDefault();       

        if ($(this).attr("placeholder") === person_plc) {

            that = $(this);

        } else if ($(this).attr("placeholder") === pwd_plc) {

            that = $(this);

        } else {

            that = $(this);

        }

 

        that.prev().css("color", "#f68121");

        that.css("color", "#000").keyup(function() {

            that.next(".btn_delete").css("visibility", "visible").bind("click", function(event) {

                $(this).prev().css("color", "#acacac").val("").blur().prev().css("color", "#000");

                $(".btn_delete").css("visibility", "hidden");

            });

        });

    })

 

    $("#person").blur(function(event) {

        event.preventDefault();

        setTimeout(function() {            // console.log("blur");

            $(".btn_delete").css("visibility", "hidden");

            $("#person").prev().css("color", "#000");

            if ($("#person").val() === "") {

                 $("#person").css("color", "#acacac");

             }

        }, 100);

    });

 

    $("#pwd").blur(function(event) {

        event.preventDefault();

        setTimeout(function() {            // console.log("blur");

            $(".btn_delete").css("visibility", "hidden");

            $("#pwd").prev().css("color", "#000");

            if ($("#pwd").val() === "") {

                 $("#pwd").css("color", "#acacac");

             }

        }, 100);

    });

 

    $("#msg").blur(function(event) {

        event.preventDefault();

        setTimeout(function() {            // console.log("blur");

            $(".btn_delete").css("visibility", "hidden");

            $("#msg").prev().css("color", "#000");

            if ($("#msg").val() === "") {

                 $("#msg").css("color", "#acacac");

             }

        }, 100);

    });

登入後複製

並且,我甚至不知道第一個問題是怎麼被解決的,在此也想向大家請教一下,為什麼加一個定時之後,我再用$(this)就取不到當前的對象,必須得像$( "#person")這樣重新取,導致我還得為每一個input添加一個blur事件,不能集中處理,或者,其實這段程式碼是可以簡化的,只是我還沒想到。 。 。也請各方同學多多指教。

以上是input的blur事件與button的click事件詳細介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
button 標籤有錯誤
來自於 1970-01-01 08:00:00
0
0
0
button按鈕
來自於 1970-01-01 08:00:00
0
0
0
我可以讓 <button> 不提交表單嗎?
來自於 1970-01-01 08:00:00
0
0
0
button按鈕點擊了沒有任何反應
來自於 1970-01-01 08:00:00
0
0
0
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板