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