登錄頁面-輸入框清空按鈕

需求：

輸入框獲取焦點時，若輸入框的值不為空，×清除按鈕顯示 ；輸入框的值為空是，×清空按鈕不顯示。當輸入數值的時候，清空按鈕顯示出來。

點擊清空按鈕時，該輸入框的值被清空，清空按鈕隱藏。

思路：

若能獲取鼠標在頁面中點擊的元素是什么，就可以觸發相應的事件，主要是event.target方法

代碼：

　　　　　　　　　　　　　　<p class="urog-form-role urog-phone">
                            <img src="images/tel.png" class="form-label-img" />
                            <input name="phone" id="phone" class="form-input" value="" type="text" placeholder="請輸入您的手機號" maxlength="16" />
                            <img src="images/urgclose.png" class="urog-regclose" data-close="phone"/>
                        </p>
                        <p class="urog-form-role">
                            <img src="images/pass.png" class="form-label-img" />
                            <input name="pass" value="" id='pass' type="password" placeholder="請輸入密碼" maxlength="11" />
                            <img src="images/urgclose.png" class="urog-regclose" data-close="pass"/>
                        </p>
                        <p class="urog-form-role">
                            <img src="images/pass.png" class="form-label-img" />
                            <input name="pass" value="" id='pass2' type="text" placeholder="請輸入密碼" maxlength="11" />
                            <img src="images/urgclose.png" class="urog-regclose" data-close="pass2"/>
                        </p> 

js代碼

　　　　 <script src="js/jquery_1_11_1min.js" type="text/javascript" charset="utf-8"></script>
        <script>
            $(function() {
                $(".urog-form-role").click(function(event){
                    //得到點擊事件的dom結構
                    var click_node = getEventTrigger(event);
                    //得到點擊close圖片的data-close
                    //data-close的值是input框的id
                    var clickName = click_node.getAttribute("data-close");
                    //得到點擊事件的屬性（INPUT）
                    var clickInput = click_node.nodeName; 
                    //判斷點擊的是close圖片，則清空相應id輸入框的值，並隱藏該close圖片
                    if(clickName=='phone'||clickName=='pass'||clickName=='pass2'){
                        $("#"+clickName).val(null);
                        $("#"+clickName).next().css("display","none");
                    }
                    //判斷點擊事件的元素是input框
                    if(clickInput=="INPUT"){
                        //獲取INPUT的id
                        var next_closeId = click_node.id;
                        //綁定獲取焦點和輸入值-函數
                        $("#"+next_closeId).bind("focus keyup",function(){
                            //判斷當前輸入框的值不為空時
                            if($("#"+next_closeId).val()!=''){
                                $(".urog-regclose").css("display","none"); 
                                //當前輸入框的下一個同袍節點樣式顯示
                                $("#"+next_closeId).next().css("display","inline-block");
                            }
                            
                        })
                    }
                })
                //得到點擊事件的dom結構
                function getEventTrigger(event)
                  { 
                      //ie 火狐 event兼容
                      //參考資料： http://www.cnblogs.com/quanhai/archive/2010/04/20/1716149.html
                       event = event? event: window.event
                    　　var x = event.srcElement ? event.srcElement:event.target;
                       return x;
                  }
            })
        </script>