首页 > 代码库 > 如何在移动web模仿客户端给input输入框添加自定义清除按钮
如何在移动web模仿客户端给input输入框添加自定义清除按钮
项目有个需求就是在input输入框添加清除按钮,网上查找资料加上自己琢磨终于弄出来了。
灵感来自于 http://www.zhangxinxu.com/wordpress/?p=4077
由于项目已经上线给为了减少改动就改为通过js全局控制的方式,就不改html了。
css部分:
1 /*输入框清除按钮*/ 2 .iss-close{ 3 position: absolute; 4 top: 0; 5 color: #ccc!important; 6 display: none; 7 cursor: pointer; 8 z-index: 9999; 9 } 10 input:valid + .iss-close { 11 display: inline-block; 12 } 13 .iss-close-hide{ 14 display: none!important; 15 }
js部分:
1 //统一添加清除按钮和清除按钮事件处理 2 $("input").attr("required","required"); 3 $("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"); 4 setTimeout(function(){ 5 $("input[required]").each(function(){ 6 $(this).after(‘<a class="iss-close">‘+ 7 ‘<i class="issfont iss-icon-font-round-close-fill"></i>‘+ 8 ‘</a>‘).next().css({"right":$(this).parent().css("paddingRight"),"marginRight":"-10px"}) 9 }); 10 },1000); 11 12 //模拟ios客户端获取焦点时显示清除按钮,离开焦点隐藏清除按钮 13 $("input[required]").focus(function(){ 14 $(this).next(".iss-close").removeClass("iss-close-hide") 15 }).blur(function(){ 16 $(this).next(".iss-close").addClass("iss-close-hide") 17 }); 18 19 //点击清除按钮 20 $(".iss-close").live("tap",function(e){ 21 e.preventDefault(); 22 e.stopPropagation(); 23 $(this).prev("input").val(""); 24 });
实现效果如下:
如何在移动web模仿客户端给input输入框添加自定义清除按钮
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。