解决android和ios的软件盘阻挡输入框的问题
-
android中如果输入框调起软键盘的话是window的height发生了变化,安卓浏览器在软键盘弹出后不会像ios浏览器那样重新计算window的高度,所以导致安卓浏览器window的高度在软键盘弹出的时候为“软键盘的高度+(window的高度-软键盘的高度)”;而其实,此时,合理的高度应该是页面的高度+软键盘弹出的高度;
-
ios如果调起软键盘的话是body的scrollTop发生了变化
-
软键盘调用的话是有个缓慢升起的动作
ios的解决办法
我们只需要在输入框聚焦之后,开启一个定时器,执行$(‘body’).scrollTop(1000000),这样由于整个body滚动到了最下面,
输入框自然就看见了
就是说body出现了滚动条,但是滚动的距离为0,所以说软键盘阻挡了输入
框,,其实是溢出的隐藏效果,所以要把body的滚动态条滚动到最高,
然后就显示出所有的内容了
代码
function fn1(){
//使用闭包,私有化变量和方法,但是闭包占用内存,慎用
let time=null
return ()=>{
clearInterval(time)
let index=0
time=setInterval(()=>{
if(index>5){
$("body").scrollTop(100000)
clearInterval(time)
}
index+=1
})
}
}
$("input").focus(fn1())
安卓的解决办法
var winHeight = $(window).height(); //获取当前页面高度
$(window).resize(function() {
var thisHeight = $(this).height();
if (winHeight - thisHeight > 50) {
//当软键盘弹出,在这里面操作
//alert('aaa');
$('body').css('height', winHeight + 'px');
} else {
//alert('bbb');
//当软键盘收起,在此处操作
$('body').css('height', '100%');
}
});
安卓下大面积触摸会导致触发touchmove的问题
首先是因为触摸的点太多,太大,然后会默认为用户在进行touchmove操作,
所以说需要在执行touchmove事件的时候进行一个判断,
判断两个触摸点是否相同,如果相同,就停止执行move事件
$(function(){
let startXY={}
$("document").on("touchstart",(e)=>{
startXY.x=e.touches[0].pageX
startXY.y=e.touches[0].pageY
})
$("document").on("touchmove",(e)=>{
if(e.touches[0].pageX==startXY.x){
return
}
//如果不想等,就执行touchmove的代码
})
})