当input遇到fix产生的问题,导致页面功能或者展示有问题。

随着手机的普及,移动端的开发也成了一个重要的方向,但由于设备的不统一会造成一些兼容性问题
  • 在ios手机上,对于一些页面长度刚好是手机的长度。键盘弹起收起后,页面不会回到原来的长度。这个时候页面底部会有一些空白和fix的按钮不能点击。解决办法:input失去焦点是,页面滑动
  item.addEventListener('blur',()=>{
	window.scroll(0,0);
  })
  • 在某些ios、qq内置浏览器,键盘弹出收,fix的元素位置错乱。解决办法:聚焦的时候fix隐藏或者static;失去焦点的时候fix显示或者fix。
	vItem.addEventListener('click',function(){
		clearTimeout(timerFcus);
		timerFcus=setTimeout(function(){
			btn.style.display="none";
		},300)
	})
	vItem.addEventListener('blur',function(){
		clearTimeout(timerBlur);
			timerBlur=setTimeout(function(){
		    btn.style.display="block";
		},200)
	})
  • 在android手机键盘弹出,input被遮住。用户不能看到输入的内容,只能滑动页面才能看见。解决办法:键盘弹出,页面向上滑动。
//获取当前元素,距离页面顶部的位置
var getPos=function (obj){
    var l=0;
    var t=0;
    while(obj)
    {
        l+=obj.offsetLeft;
        t+=obj.offsetTop;
        obj=obj.offsetParent;
    }
    return {left: l, top: t};
};
    vItem.addEventListener('click',function (e) {
            if(isAndroid){//键盘遮挡input问题
                var that=this;
                clearTimeout(timer);
                timer=setTimeout(function(){
                    var h=getPos(that).top;
                    document.documentElement.scrollTop=h-50;
                    document.body.scrollTop=h-50;
                },500)
            }
        });
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值