Detaillierte Einführung in das Unschärfeereignis der Eingabe und das Klickereignis der Schaltfläche

Beginnen wir mit einer Einführung. Ich habe in letzter Zeit h5-Seiten für Mobiltelefone geschrieben, hauptsächlich zum Thema Anmeldung und Registrierung. Das Unvermeidlichste ist das Formularelement.

Was ich erreichen möchte ist: Hinter dem Eingabefeld befindet sich ein Löschsymbol. Wenn etwas eingegeben wird, wird das Ereignis ausgelöst und das Löschsymbol angezeigt Geben Sie den zuvor eingegebenen Inhalt ein und verlassen Sie das Eingabefeld. Das Symbol verschwindet.

<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>

Die vorherige Erwartung bestand darin, dem Eingabefeld Fokus- und Unschärfeereignisse hinzuzufügen.

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

Aber ich stieß auf ein Problem: Als ich nach der Eingabe auf das Löschsymbol klickte, wurde Unschärfe angezeigt Wenn das Ereignis ebenfalls ausgelöst wird, verschwindet das Symbol zu diesem Zeitpunkt und kann nicht angeklickt werden. Wenn das Symbol jedoch während der Unschärfe nicht ausgeblendet wird, verliert die Eingabe den Fokus, nachdem jede Eingabe abgeschlossen ist, und das Symbol bleibt angezeigt.

Diese Frage ist ein Witz und blieb bis heute hängen. . . Ich bin auf ein weiteres Problem gestoßen! !

Problembeschreibung: Nachdem ich den Inhalt in das Eingabefeld eingegeben hatte, klickte ich direkt auf die Schaltfläche „Registrieren“, als ich während der Eingabe zum ersten Mal darauf klickte. Der Fokus lag darauf. Ich musste zweimal darauf klicken, damit die Schaltfläche funktionierte.

Erst dann wurde mir klar, dass dies eine Unschärfe war, die dem Klicken das Rampenlicht nahm, also musste ich gehen Wenn ich der Ausführung von Blur eine Verzögerung hinzufüge, ist tatsächlich alles in Ordnung, und plötzlich ist die Welt still. . .

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

Dann gab es nichts mehr, sogar das kleine Löschsymbol konnte mit einer Unschärfe ausgeblendet werden. Allerdings hatte mein js-Code viele doppelte Codes, wie folgt:

Außerdem weiß ich nicht einmal, wie das erste Problem gelöst wurde. Ich möchte auch alle fragen, warum ich nach dem Hinzufügen eines Timings das aktuelle Objekt nicht mit $(this) erhalten kann („#person“) wird so abgerufen, was bedeutet, dass ich für jede Eingabe ein Unschärfeereignis hinzufügen muss, das nicht zentral verarbeitet werden kann. Tatsächlich kann dieser Code vereinfacht werden, aber ich habe noch nicht daran gedacht . . . Ich bitte auch Studierende aus allen Gesellschaftsschichten um Ratschläge.

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in das Unschärfeereignis der Eingabe und das Klickereignis der Schaltfläche. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!