先來一段引子，最近在寫手機h5頁面，主要是一些登陸注冊方面的，最繞不開的就是表單元素。

我想實現(xiàn)的是：在輸入框后邊有一個刪除圖標(biāo)，當(dāng)輸入東西的時候觸發(fā)事件，顯示刪除圖標(biāo)，點擊該圖標(biāo)會刪除之前輸入的內(nèi)容，離開輸入框，該圖標(biāo)消失。

<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位，建議數(shù)字、字母、符號組合"><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>

之前的預(yù)想是：為輸入框添加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);} });

但是遇到了問題：當(dāng)我輸入后點擊刪除圖標(biāo)，同時也觸發(fā)了blur事件，此時圖標(biāo)消失，也就點擊不到圖標(biāo)了，但是如果不在blur時讓圖標(biāo)消失，則每一次輸入完成后input失去焦點，圖標(biāo)就一直顯示著。

????? 這個問題向個梗，一直卡著，直到今天。。。我又遇到了另外一個問題！！

問題描述：當(dāng)我在輸入框輸入完內(nèi)容后，直接點擊注冊按鈕，第一次點擊，沒反應(yīng)，每一次都是焦點在input時點擊button，需要點擊兩次，button才會有所反應(yīng)；

????? 這時我才意識到，這是blur搶占了click的風(fēng)頭，那么我就得去blur里找問題，果然，如果我給blur的執(zhí)行加一個延時....

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

萬事大吉，一下子世界都安靜了。。。

然后就沒有然后了，連之前的刪除小圖標(biāo)也聽話了，一blur就能隱藏，可是我的js代碼重復(fù)代碼非常之多，如下：

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)就取不到當(dāng)前的對象，必須得像$("#person")這樣重新取，導(dǎo)致我還得為每一個input添加一個blur事件，不能集中處理，或者，其實這段代碼是可以簡化的，只是我還沒想到。。。還請各方同學(xué)多多指教。

?

本文原創(chuàng)，轉(zhuǎn)載請注明出處。

更多專業(yè)前端知識，請上 【猿2048】www.mk2048.com

總結(jié)

以上是生活随笔為你收集整理的【原】相煎何太急——input的blur事件与button的click事件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。