Detailed introduction to the blur event of input and the click event of button

Let’s start with an introduction. I’ve been writing h5 pages for mobile phones recently, mainly about login and registration. The most unavoidable thing is the form element.

What I want to achieve is: there is a delete icon behind the input box. When something is entered, the event is triggered and the delete icon is displayed. Clicking the icon will delete the previously entered content and leave. input box, the icon disappears.

<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="Detailed introduction to the blur event of input and the click event of button" ></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="Detailed introduction to the blur event of input and the click event of button" ></i>
        <i class="r hide_switch"><img  src="/static/imghwm/default1.png"  data-src="../imgs/btn_display_switch.png"  class="lazy"   alt="Detailed introduction to the blur event of input and the click event of button" ></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="Detailed introduction to the blur event of input and the click event of button" ></i>
        <button class="r receive_msg">获取验证码</button>
    </div></div><div class="log">     <button class="btn_register">立即注册</button></div>

The previous expectation was to add focus and blur events to the input box;

$("#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);
        }    
    });

But I encountered a problem: when I clicked the delete icon after inputting, the blur event was also triggered. At this time If the icon disappears, the icon cannot be clicked. However, if the icon is not made to disappear during blur, the input will lose focus after each input is completed, and the icon will remain displayed.

This question is a joke and has been stuck until today. . . I've encountered another problem! !

Problem description: After I finished inputting the content in the input box, I clicked the registration button directly. The first time I clicked it, there was no response. Every time I clicked the button while the focus was on the input, I needed to click it twice for the button to work. There will be a reaction;

At this time, I realized that this was blur taking over the limelight of click, so I had to find the problem in blur. Sure enough, if I add a delay to the execution of 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);
    });

Everything is fine, and suddenly the world is quiet. . .

Then there was nothing more. Even the previously deleted small icon was obedient and could be hidden with a blur. However, my js code had a lot of duplicate codes, as follows:

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);
    });

And, I don’t even know how the first problem was solved. I would also like to ask everyone why after adding a timing, I cannot get the current object using $(this). It must be like $( "#person") is retrieved in this way, which means I have to add a blur event for each input, which cannot be processed centrally. Or, in fact, this code can be simplified, but I haven't thought of it yet. . . I also ask students from all walks of life to give me some advice.

The above is the detailed content of Detailed introduction to the blur event of input and the click event of button. For more information, please follow other related articles on the PHP Chinese website!