移动端页面中如何处理虚拟键盘弹出导致的页面变形的问题？

[lee88688]

最近在写移动端的页面时发现如果虚拟键盘弹出后会导致页面变形，整个页面不太可用。页面的输入框是使用绝对定位，键盘弹出之后输入框也看不见了😂。

不知道现在有没有关于虚拟键盘检测或者阻止页面因为虚拟键盘弹出变形的 api （我搜索之后好像是没有），目前只能通过 resize 事件检测，然后把输入框移动到顶端避免被遮挡。

[Track13]

有，但是因为兼容性等于没有。
https://juejin.cn/post/7261985825089929276

[murmur]

学淘宝这种，如果文本框在底下，点了之后不要出现文本框，而是跳到一个新页面，这个新页面文本框在最上面

设计的时候就避免把文本框放地下

当然如果是表单这种流式页面就不管他了

[DOLLOR]

输入框应该尽量避免用绝对定位吧，尤其是移动端的小屏幕，绝对定位能造成很多交互的问题。

[lee88688]

@murmur
@DOLLOR
这输入框使用绝对定位是业务场景限制的没办法，就是看看有没有其他方法可以打个补丁。

[rabbbit]

1 改设计，点击输入框跳转到新页面或弹出弹窗，将输入框放在新页面、弹窗顶部
2 输入框下面放一个占位的 div ，点击输入框时显示 div 把输入框顶上去

[rabbbit]

3 不考虑兼容性就 virtualKeyboard

[lee88688]

@rabbbit 我测试了一下当虚拟键盘弹出来的时候整个页面发生比较大的变化，整个布局都乱套了。有没有相关的文章介绍这个的呢？

[euronx]

给 input 框添加 onfocus 事件，把 body 的 style.height 设置为 window.innerHeight 且 overflow: 'hidden'

[euronx]

开发了好几年移动端页面，一直都用的这个方法，一直都没啥问题