在html登录页面中，通常有很多的输入框，例如，输入姓名，密码，爱好等等。输入的值很多的话，得一个个删除，用户体验不好。那么，在用户输入姓名后，可以增加清空按钮吗？需求就来了~~输入框获取焦点时，若输入框的值不为空，×清除按钮显示；输入框的值为空时，×清空按钮不显示。当输入数值的时候，清空按钮显示出来。点击清空按钮时，该输入框的值被清空，清空按钮隐藏。
工具/原料
Sublimetext3
支持h5的浏览器
方法/步骤
1、先编辑h5页面，页面中增加一个输入框，输入框之后添邹菁惨挣加一个小图片-关闭按钮。如下图了html代码如下<p> <i罪焐芡拂mgsrc="images/tel.png"class="form-label-img"/><inputname="phone"id="phone"class="form-input"value=""type="text"placeholder="请输入您的手机号"maxlength="16"/><imgsrc="images/urgclose.png"class="urog-regclose"data-close="phone"/> </p>
2、现螅岔出礤在页面已经做好了，再加js代码<scriptsrc="js/jquery_1_11_1min.js"type="text/javascr足毂忍珩ipt"charset="utf-8"></script> <script> $(function(){ $(".urog-form-role").click(function(){//得到点击事件的dom结构 varclick_node=getEventTrigger(event);//得到点击close图片的data-close //data-close的值是input框的id varclickName=click_node.getAttribute("data-close");//得到点击事件的属性（INPUT） varclickInput=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 varnext_closeId=click_node.id;//绑定获取焦点和输入值-函数 $("#"+next_closeId).bind("focuskeyup",function(){//判断当前输入框的值不为空时 if($("#"+next_closeId).val()!=''){ $(".urog-regclose").css("display","none"); //当前输入框的下一个同袍节点样式显示 $("#"+next_closeId).next().css("display","block"); } }) } })//得到点击事件的dom结构 functiongetEventTrigger(event) { x=event.target; returnx; } })</script>
3、这段js主要是event.target方法