1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > 关于移动端IOS input弹起键盘时 引起高度问题

关于移动端IOS input弹起键盘时 引起高度问题

时间:2019-12-22 05:16:10

相关推荐

关于移动端IOS  input弹起键盘时 引起高度问题

.软键盘弹起,在安卓上是缩小了内容区域的高度, 软键盘将下半部分进行遮挡;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;将软键盘唤起前的浏览器滚动部分高度重新赋给改变后的高度});

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。