如何在移動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("");
});

 

實現效果如下：