【原】相煎何太急——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="../imgs/btn_Eliminate.png"></i>
    </div>
    <div class="count">
        <label for="pwd">密&nbsp;&nbsp;&nbsp;&nbsp;碼</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事件；

$("#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事件，不能集中處理，或者，其實這段代碼是可以簡化的，只是我還沒想到。。。還請各方同學多多指教。

 

本文原創，轉載請注明出處。