登录页面-输入框清空按钮

需求：

输入框获取焦点时，若输入框的值不为空，×清除按钮显示；输入框的值为空是，×清空按钮不显示。当输入数值的时候，清空按钮显示出来。

点击清空按钮时，该输入框的值被清空，清空按钮隐藏。

思路：

若能获取鼠标在页面中点击的元素是什么，就可以触发相应的事件，主要是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>