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

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

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

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

css部分：

/*输入框清除按钮*/
.iss-close{
    position: absolute;
    top: 0;
    color: #ccc!important;
    display: none;
    cursor: pointer;
    z-index: 9999;
}
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("");
});

 

实现效果如下：