.软键盘弹起,在安卓上是缩小了内容区域的高度, 软键盘将下半部分进行遮挡;ios上则是整个webview整体上移,改变了整个内容区域的scrollTop值。
**
经过筛选,最终选择使用定时器,思路如下:
-
点击触发input
-
在获取焦点(软键盘弹起)前,先将页面的scrollTop值存起来
-
获取焦点
-
判断浏览器类型,如果是ios,设置定时器,将此时内容的高度值赋值给浏览器当前滚动高度(确保完全显示)
-
失去光标
-
判断浏览器类型,若为ios,清除定时器,并设置浏览器当前滚动高度值为一开始键盘未弹起的scrollTop值
//解决第三方软键盘唤起时底部input输入框被遮挡问题
var bfscrolltop = document.body.scrollTop;//获取软键盘唤起前浏览器滚动部分的高度
$("input.inputframe").focus(function(){//在这里‘input.inputframe’是我的底部输入栏的输入框,当它获取焦点时触发事件
interval = setInterval(function(){//设置一个计时器,时间设置与软键盘弹出所需时间相近
document.body.scrollTop = document.body.scrollHeight;//获取焦点后将浏览器内所有内容高度赋给浏览器滚动部分高度
},100)
}).blur(function(){//设定输入框失去焦点时的事件
clearInterval(interval);//清除计时器
document.body.scrollTop = bfscrolltop;将软键盘唤起前的浏览器滚动部分高度重新赋给改变后的高度
});