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

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

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

<div class="wrapper">
    <div class="count">
        <label for="person">手机号</label>
        <input id="person" type="text" placeholder="请输入手机号">
        <i class="r btn_delete delete1"><img  src="/static/imghwm/default1.png"  data-src="../imgs/btn_Eliminate.png"  class="lazy"   alt="input的blur事件與button的click事件詳細介紹" ></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="/static/imghwm/default1.png"  data-src="../imgs/btn_Eliminate.png"  class="lazy"   alt="input的blur事件與button的click事件詳細介紹" ></i>
        <i class="r hide_switch"><img  src="/static/imghwm/default1.png"  data-src="../imgs/btn_display_switch.png"  class="lazy"   alt="input的blur事件與button的click事件詳細介紹" ></i>
    </div>
    <div class="confirm">
        <label for="msg">短信验证码</label>
        <input id="msg" type="text" placeholder="请输入短信验证码">
        <i class="r btn_delete delete3"><img  src="/static/imghwm/default1.png"  data-src="../imgs/btn_Eliminate.png"  class="lazy"   alt="input的blur事件與button的click事件詳細介紹" ></i>
        <button class="r receive_msg">获取验证码</button>
    </div></div><div class="log">     <button class="btn_register">立即注册</button></div>

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

$("#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的執行加一個延時. ....

$("#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程式碼重複程式碼非常之多，如下：

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中文網其他相關文章！