Introduction détaillée à l'événement flou d'entrée et à l'événement clic du bouton

Commençons par une introduction. J'ai récemment écrit des pages h5 pour téléphones mobiles, principalement sur la connexion et l'inscription. La chose la plus incontournable est l'élément de formulaire.

Ce que je veux réaliser, c'est : il y a une icône de suppression derrière la zone de saisie. Lorsque quelque chose est saisi, l'événement est déclenché et l'icône de suppression s'affiche. le contenu précédemment saisi et quittez la zone de saisie, l'icône disparaît.

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

L'attente précédente était d'ajouter des événements de focus et de flou à la zone de saisie

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

Mais j'ai rencontré un problème : lorsque j'ai cliqué sur l'icône de suppression après avoir tapé, le flou était affiché ; également déclenché, l'icône disparaît à ce moment-là et il est impossible de cliquer sur l'icône. Cependant, si l'icône ne disparaît pas pendant le flou, l'entrée perdra le focus une fois chaque saisie terminée et l'icône restera affichée.

Cette question est une blague et est restée bloquée jusqu'à aujourd'hui. . . J'ai rencontré un autre problème ! !

Description du problème : après avoir fini de saisir le contenu dans la zone de saisie, j'ai cliqué directement sur le bouton d'enregistrement lorsque j'ai cliqué dessus pour la première fois, il n'y avait pas de réponse à chaque fois que je cliquais sur le bouton lors de la saisie. était concentré, j'ai dû cliquer deux fois dessus pour que le bouton fonctionne.

Ce n'est qu'à ce moment-là que j'ai réalisé que c'était le flou qui détournait l'attention du clic, j'ai donc dû aller trouver le problème ; dans le flou. Effectivement, si j'ajoute un délai à l'exécution du flou...

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

Tout va bien, et du coup le monde est calme. . .

Ensuite, il n'y avait plus rien. Même la petite icône de suppression était obéissante et pouvait être masquée avec un flou. Cependant, mon code js avait beaucoup de codes en double, comme suit :

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);
    });

De plus, je ne sais même pas comment le premier problème a été résolu. Je voudrais aussi demander à tout le monde pourquoi après avoir ajouté un timing, je ne parviens pas à obtenir l'objet actuel en utilisant $(this), je dois utiliser quelque chose comme $. ("#person") est récupéré comme ceci, ce qui signifie que je dois ajouter un événement de flou pour chaque entrée, qui ne peut pas être traité de manière centralisée. Ou, en fait, ce code peut être simplifié, mais je n'y ai pas encore pensé. . . . Je demande également à des étudiants de tous horizons de me donner quelques conseils.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!