<div > <input type="hidden" name="user_id" id="user_id" value="0" /> <input name="user_name" id="user_name" class="" type="text" onClick="Click(this,'user_id');" onBlur="Clear_div(this);" /> <div class="" id="Click_user_name" ></div><!--此处div id需要手动更换--> </div>
JS:
/*清除键*/ function Click(obj,inputid) { var id = inputid; var div = "Click_"; var divname=div+obj.id; $("#"+divname).html("");//防止重复增加,增加前清除div内内容 if(id != 0)//三重引号,内容被切割,使用转义字符 \" 来替代 { //这里使用了底层自带的图标,如果没有可以到图标库里下载 var new_element ="<a href='javascript:' class='' id='' onClick=\"Reset_search('"+obj.id+"','"+id+"');\"></a>"; }else { var new_element ="<a href='javascript:' class='' id='' onClick=\"Reset_search('"+obj.id+"',0);\"></a>"; } $("#"+divname).append(new_element); } /*清除input内数据*/ function Reset_search(inputname,inputid) { var div = "Click_"; var name = inputname; var divname=div+name; $("#"+name).val(""); if(inputid != 0) { var id = inputid; $("#"+id).val(""); } $("#"+divname).html("");//清空html } /*清除按钮*/ function Clear_div(obj) { var inputdata = $("#"+obj.id).val(); if(inputdata == '') { var div = "Reset_search_"; var name = obj.id; var divname=div+name; $("#"+divname).html("");//input失去焦距且input为空时清空html } }