"Original" to fry what too urgent--input blur event with Button's Click event

First to a primer, recently in the Writing cell phone H5 page, mainly some landing registration aspects, the most inseparable is the form element.

What I want to achieve is: there is a delete icon in the back of the input box, when the input thing triggered the event, the deletion icon, click on the icon will delete the previous input, leave the input box, the icon disappears.

<Divclass= "wrapper">    <Divclass= "Count">        <label for= "Person">Phone number</label>        <inputID= "Person"type= "text"placeholder= "Please enter phone number">        <Iclass= "R btn_delete delete1"><imgsrc=".. /imgs/btn_eliminate.png "></I>    </Div>    <Divclass= "Count">        <label for= "pwd">Dense&nbsp;&nbsp;&nbsp;&nbsp;Code</label>        <inputID= "pwd"type= "text"placeholder= "6-18-bit, recommended number, letter, symbol combination">        <Iclass= "R btn_delete delete2"><imgsrc=".. /imgs/btn_eliminate.png "></I>        <Iclass= "R Hide_switch"><imgsrc=".. /imgs/btn_display_switch.png "></I>    </Div>    <Divclass= "Confirm">        <label for= "MSG">SMS Verification Code</label>        <inputID= "MSG"type= "text"placeholder= "Please enter SMS Verification Code">        <Iclass= "R btn_delete delete3"><imgsrc=".. /imgs/btn_eliminate.png "></I>        <Buttonclass= "R receive_msg">Get Verification Code</Button>    </Div></Div>
<div class= "Log" >
<button class= "Btn_register" > Register now </button>
</div>

Previously expected: 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 encountered the problem: when I entered after clicking the delete icon, also triggered the Blur event, when the icon disappears, also can not click on the icon, but if not blur when the icon disappears, each time the input is completed after the inputs lose focus, the icon has been displayed.

This problem to a stem, has been stuck, until today ... I have another problem!!

Problem Description: When I entered the input box after the content, directly click on the registration button, the first click, no response, each time is the focus on the input click button, need to click two times, Button will react;

Then I realized that this is blur seize the click of the Thunder, then I have to go to blur to find the problem, sure enough, if I give blur implementation plus a delay ....

$ ("#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 all, all of a sudden the world is quiet ...

Then there is no then, even before the deletion of small icons also obedient, a blur can be hidden, but my JS code is very repetitive code, as follows:

varPerson_val = $ ("#person"). Val (); varPERSON_PLC = $ ("#person"). attr ("placeholder"); varPWD_PLC = $ ("#pwd"). attr ("placeholder"); varthat ; $("#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 do not even know how the first problem is solved, I would like to ask you, why add a timing, I again with $ (this) will not take the current object, it must be like $ ("#person") so that the re-fetch, Cause I have to add a blur event for each input, can't concentrate, or, in fact, this code can be simplified, but I did not think ... Please also ask all the students to advise.

This article original, reproduced please indicate the source.

"Original" to fry the--input blur event with the button's Click event