手机键盘弹出遮盖了表单输入框

Question

正常登录页面点击输入框获取焦点后，手机的键盘从底部弹出，然后表单应该跟着被顶上去，但是在一些手机自带的浏览器上键盘弹出后表单并没有被顶上去，导致下面的密码输入框被键盘遮挡了。试过监听window的resize事件，发现键盘弹出后resize事件并未触发，也就是说页面的高度没有变化(innerHeight、clientHeight等等各种Height全试过了)，就好像键盘是脱离了浏览器一样。然后又尝试通过获取焦点来判断键盘弹出，但键盘收起就无法判断，因为如果用户通过点击键盘右上角的收起按钮来收起键盘，输入框并不会失去焦点。而收起按钮又无法捕获到。想知道前端有什么方法可以解决这个问题。PS：测试的是一加手机，在同一手机的chrome上则正常，表单被顶上去了。测试其他手机时大多数也正常(包括UC)，但也有部分手机自带浏览器甚至连chrome都不行。

Answer 1

要想实现输入框弹上去很简单，只需要给表单注册获取焦点，和失去焦点两个事件即可。
当获取焦点(onfocus)的时候，说明需要输入内容了，让表单相对于整个页面的top定位，位置自己判断，高于输入键盘高度即可。
失去焦点(onblur)的时候，再让表单恢复到原来的位置就行了
注意：
这里有一个问题，就是整体页面排版布局的问题，如果你的设计图本身有logo之类的，你就要考虑表单弹上去的时候会不会遮挡logo，此时就不是技术上的问题了，这就需要和设计那边沟通好了，劲量避免这种情况
苹果手机是自带这个功能的，苹果手机输入的时候，表单会自动弹到输入框的上方