입력의 블러 이벤트와 버튼의 클릭 이벤트에 대한 자세한 소개

소개부터 시작하겠습니다. 저는 최근 휴대폰용 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="/static/imghwm/default1.png"  data-src="../imgs/btn_Eliminate.png"  class="lazy"   alt="입력의 블러 이벤트와 버튼의 클릭 이벤트에 대한 자세한 소개" ></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="입력의 블러 이벤트와 버튼의 클릭 이벤트에 대한 자세한 소개" ></i>
        <i class="r hide_switch"><img  src="/static/imghwm/default1.png"  data-src="../imgs/btn_display_switch.png"  class="lazy"   alt="입력의 블러 이벤트와 버튼의 클릭 이벤트에 대한 자세한 소개" ></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="입력의 블러 이벤트와 버튼의 클릭 이벤트에 대한 자세한 소개" ></i>
        <button class="r receive_msg">获取验证码</button>
    </div></div><div class="log">     <button class="btn_register">立即注册</button></div>

이전 예상은 입력 상자에 포커스 및 흐림 이벤트를 추가하는 것이었습니다.

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

그러나 문제가 발생했습니다. 입력 후 삭제 아이콘을 클릭하면 이때 아이콘이 사라졌습니다. 아이콘은 있지만 블러 처리 중에 아이콘을 사라지게 하지 않으면 각 입력이 완료된 후 입력이 포커스를 잃고 아이콘이 항상 표시됩니다.

오늘까지 이 질문이 맴돌았어요. . . 또 다른 문제가 발생했습니다! !

문제설명: 입력창에 내용 입력을 마친 후 바로 등록버튼을 눌렀는데, 처음 눌렀을 때 입력에 포커스가 있을 때 버튼을 눌렀을 때마다 반응이 없었습니다. 버튼이 반응하기 전에 두 번 클릭해야 했습니다. ;

이때 이것이 클릭의 각광을 받고 있다는 것을 깨달았기 때문에 블러 실행에 지연을 추가하면 당연히 블러에서 문제를 찾아야 했습니다. ...

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

다 괜찮을 거야, 갑자기 세상이 조용해졌어. . .

그러면 더 이상 아무것도 없었습니다. 이전에 삭제한 작은 아이콘도 준수하여 흐리게 표시할 수 있었습니다. 그런데 제 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") 처럼 다시 가져와야 합니까? 또는 실제로 이 코드를 단순화할 수 있지만 아직 생각해 본 적이 없습니다. . . 또한 각계각층의 학생들에게 조언을 부탁드립니다.

위 내용은 입력의 블러 이벤트와 버튼의 클릭 이벤트에 대한 자세한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!