前端小功能-input清除

点击input效果：

点击右侧按钮则清除input数据

html页面：

<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
	}
}

图标库：
iconfont-阿里妈妈MUX倾力打造的矢量图标管理、交流平台