【原】相煎何太急——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事件，不能集中處理，或者，其實這段代碼是能夠簡化的，只是我還沒想到。。。還請各方同窗多多指教。

 

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