我想实现的是：在输入框后边有一个删除图标，当输入东西的时候触发事件，显示删除图标，点击该图标会删除之前输入的内容，离开输入框，该图标消失。

<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">密 码</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事件，不能集中处理，或者，其实这段代码是可以简化的，只是我还没想到。。还请各方同学多多指教。