js解决软键盘遮挡输入框的问题分享

前端之家收集整理的这篇文章主要介绍了js解决软键盘遮挡输入框的问题分享前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

经验须知

弹出软键盘时:

ios端$(‘body').scrollTop()会改变

android端$(window).height()会改变

拉起键盘不是一瞬间,而是有一个缓动过程

问题重现

ios端,经常会出现输入法遮挡输入框的问题(特别是那种有一个白色顶部的输入法,如:百度输入法),如图:

问题解决

我们只需要在输入框聚焦之后,开启一个定时器,执行$(‘body').scrollTop(1000000),这样由于整个body滚动到了最下面,输入框自然就看见了,具体请查看以下示例

示例源码

<Meta charset="UTF-8"> <Meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"> <Meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> demo

以上这篇js解决键盘遮挡输入框的问题分享就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持编程之家。

猜你在找的JavaScript相关文章