入力のブラーイベントとボタンのクリックイベントの詳細な紹介

まずは紹介から始めましょう。私は最近、ログインと登録を中心に携帯電話用の 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);
        }    
    });

しかし、問題が発生しました。入力後に削除アイコンをクリックすると、この時点でブラーイベントもトリガーされてしまいました。アイコンはそこにありますが、ぼかし中にアイコンを非表示にしないと、入力が完了するたびにフォーカスが失われ、アイコンは常に表示されます。

この質問は今日まで私に引っかかっています。 。 。別の問題が発生しました! ！

問題の説明: 入力ボックスに内容を入力し終えた後、初めて登録ボタンをクリックしたのですが、入力にフォーカスがあるときにボタンをクリックするたびに反応がありませんでした。ボタンが反応する前に 2 回クリックする必要がありました。;

そのとき、これがクリックの脚光を浴びていることに気づき、ブラーの実行に遅延を追加すると、ブラーの問題を見つける必要がありました。 ...

rreee

すべてうまくいくでしょう、突然世界が静かになりました。 。 。

その後、以前削除した小さなアイコンも従順でぼかしで隠すことができましたが、私のjsコードには次のように重複したコードがたくさんありました:

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

そして、私は知りませんでした。最初のものは、問題がどのように解決されたのかをお聞きしたいのですが、なぜタイミングを追加した後、 $(this) を使用して現在のオブジェクトを取得できず、 $("#person") のように再フェッチする必要があります。入力ごとにブラー イベントを追加する必要があるため、一元的に処理することはできません。あるいは、実際にはこのコードを簡素化することもできますが、まだ考えていません。 。 。また、さまざまな立場の学生にアドバイスを求めています。

以上が入力のブラーイベントとボタンのクリックイベントの詳細な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。