功能描述：
1.输入框中输入内容时删除按钮出现
2.点击清除按钮清空输入框中的内容
3.点击页面中除了输入框和按钮本身以外的html元素时删除按钮消失
4.滑动屏幕时删除按钮消失
5.键盘落下时删除按钮消失
html代码如下：(简化样式)
<div><input type="text" placeholder="请输入验证码" class="pmsInput"><i class="deleteIcon"></i></div>
css代码：
.deleteIcon{
/* 图片或生成图标库引用 */
display: none; /*先把图片隐藏 */
}
js代码：（依赖jquery或者zepto)
$(function(){
var winHeight = $(window).height();
$('.delectIcon').tap(function(){
$(this).parents('.Cformline').find('input').val("");
})
//点击清除按钮清空输入框中的内容
$('.delectIcon').parent('.Ltar').tap(function(){
$(this).parents('.Cformline').find('input').val("");
})
$('input').bind("focus input propertychange",function(){
if($(this).val().length!=0){
var delIcon = $(this).parents('.Cformline').find('.delectIcon');
delIcon.css({'display':'inline-block'});
}else{
$('.delectIcon').hide();
}
})
//点击除了输入框以外的html元素时删除按钮消失
$('body').tap(function(e){
if($(e.target).closest("input").length == 0){
$('.delectIcon').hide();
}
})
//（ios）滑动屏幕时删除按钮消失
$(window).scroll(function () {
if(document.body.scrollTop == 0){
$('.delectIcon').hide();
}
})
//（安卓端）键盘落下时删除按钮消失
$(window).resize(function(){
var thisHeight = $(window).height();
if(winHeight - thisHeight <= 50){
$('.delectIcon').hide();
}else{
if($("input:focus").val() && $("input:focus").val().length > 0){
$('.delectIcon').css({'display':'inline-block'});
}
}
})
})
示例图片：
（代码进一步完善中，若有bug或优化建议欢迎指教O(∩_∩)O）
网友评论