这是一个创建于 644 天前的主题，其中的信息可能已经有所发展或是发生改变。
最近在写移动端的页面时发现如果虚拟键盘弹出后会导致页面变形，整个页面不太可用。页面的输入框是使用绝对定位，键盘弹出之后输入框也看不见了。
不知道现在有没有关于虚拟键盘检测或者阻止页面因为虚拟键盘弹出变形的 api （我搜索之后好像是没有），目前只能通过 resize 事件检测，然后把输入框移动到顶端避免被遮挡。
 | 1 bgm004 2024-01-08 14:39:56 +08:00 有，但是因为兼容性等于没有。 https://juejin.cn/post/7261985825089929276 |
 | 2 murmur 2024-01-08 14:41:45 +08:00 学淘宝这种，如果文本框在底下，点了之后不要出现文本框，而是跳到一个新页面，这个新页面文本框在最上面 设计的时候就避免把文本框放地下 当然如果是表单这种流式页面就不管他了 |
 | 3 AV1 2024-01-08 14:55:14 +08:00 输入框应该尽量避免用绝对定位吧，尤其是移动端的小屏幕，绝对定位能造成很多交互的问题。 |
 | 5 rabbbit 2024-01-08 15:17:52 +08:00 1 改设计，点击输入框跳转到新页面或弹出弹窗，将输入框放在新页面、弹窗顶部 2 输入框下面放一个占位的 div ，点击输入框时显示 div 把输入框顶上去 |
| 6 rabbbit 2024-01-08 15:19:13 +08:00 3 不考虑兼容性就 virtualKeyboard |
 | 7 lee88688 OP @rabbbit 我测试了一下当虚拟键盘弹出来的时候整个页面发生比较大的变化，整个布局都乱套了。有没有相关的文章介绍这个的呢？ |
 | 8 euronx 2024-03-06 13:14:34 +08:00 给 input 框添加 onfocus 事件，把 body 的 style.height 设置为 window.innerHeight 且 overflow: 'hidden' |
| 9 euronx 2024-03-06 13:15:18 +08:00 开发了好几年移动端页面，一直都用的这个方法，一直都没啥问题 |
Select Language