如何在移动web模仿客户端给input输入框添加自定义清除按钮

项目有个需求就是在input输入框添加清除按钮，网上查找资料加上自己琢磨终于弄出来了。

灵感来自于 http://www.zhangxinxu.com/wordpress/?p=4077

由于项目已经上线给为了减少改动就改为通过js全局控制的方式，就不改html了。

css部分：

 /*输入框清除按钮*/
 .iss-close{
     position: absolute;
     top:;
     color: #ccc!important;
     display: none;
     cursor: pointer;
     z-index:;
 }
 input:valid + .iss-close {
     display: inline-block;
 }
 .iss-close-hide{
     display: none!important;
 }

js部分：

 //统一添加清除按钮和清除按钮事件处理
 $("input").attr("required","required");
 $("input[type=file],input[type=reset],input[type=submit],input[type=password],input[type=image],input[type=radio],input[type=checkbox],input[type=hidden],input[type=button],input[type=date],input[type=month],input[types=date],input[types=month],input.iss-search,input[readonly],input[disabled]").removeAttr("required");
 setTimeout(function(){
     $("input[required]").each(function(){
         $(this).after('<a class="iss-close">'+
             '<i class="issfont iss-icon-font-round-close-fill"></i>'+
             '</a>').next().css({"right":$(this).parent().css("paddingRight"),"marginRight":"-10px"})
     });
 },1000);

 //模拟ios客户端获取焦点时显示清除按钮，离开焦点隐藏清除按钮
 $("input[required]").focus(function(){
     $(this).next(".iss-close").removeClass("iss-close-hide")
 }).blur(function(){
     $(this).next(".iss-close").addClass("iss-close-hide")
 });

 //点击清除按钮
 $(".iss-close").live("tap",function(e){
     e.preventDefault();
     e.stopPropagation();
     $(this).prev("input").val("");
 });

实现效果如下：