先來一段引子，最近在寫手機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">密 码</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事件，不能集中處理，或者，其實這段程式碼是可以簡化的，只是我還沒想到。 。 。也請各方同學多多指教。
以上是input的blur事件與button的click事件詳細介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！
