#移动端键盘弹起兼容问题总结

#解决方案

移动端键盘弹起会改变页面的高度，导致页面的布局发生变化，在一些特殊的布局里面，会出现一些问题，比如：fixed布局，会将部分元素顶出可视区域。

1. 从设计层面上来讲，应该将Input, 放在页面上半部分，如果输入框下方有足够的位置，那么键盘可以直接弹出，而不会影响页面的布局。还有一部分在底部的输入框可以采用新开页面将输入框放入新页面中的做法（或者直接蒙层弹出， 遮罩原有页面）。

2. 如果使用popup的方案来做，还会涉及到第二个问题autofocus, 正常的交互，我们打开popup展示输入框，会要求自动聚焦。但是在popup中，输入框的位置不是固定的，所以我们需要在popup显示的时候，手动聚焦。另外在部分组件库中类似vant-popup，会有弹出一个动画时长这种情况下，手动聚焦的延时时间需要根据动画时长来调整。

3. 如果一定要输入框在页面的底部，那需要一个隐藏数输入框聚焦唤起键盘，此时页面不会被顶起，然后再切换实际要聚焦的输入框上。键盘没有被重新唤起，页面的高度也不会被改变。

#聚焦实验

#实验场景

#iOS Safari(604.1)

输入框位置	页面是否被顶起	视窗高度变化	自动聚焦	键盘弹出 （自动）	touch失焦
顶部	否	否	否	否	是
中间	大部分会	否	否	否	是
底部	大部分会	否	否	否	是

#iOS Webview(537.36)

输入框位置	页面是否被顶起	视窗高度变化	自动聚焦	键盘弹出 （自动）	touch失焦
顶部	否	否	是	是	否
中间	大部分会	否	是	是	否
底部	大部分会	否	是	是	否

#Android Microsoft Edge(131.0.2903.87)

输入框位置	页面是否被顶起	视窗高度变化	自动聚焦	键盘弹出 （自动）	touch失焦
顶部	否	是	是	否	否
中间	否	是	是	否	否
底部	是	是	是	否	否

#Android Webview (132.0.6834.56)

输入框位置	页面是否被顶起	视窗高度变化	自动聚焦	键盘弹出 （自动）	touch失焦
顶部	否	是	是	否	否
中间	否	是	是	否	否
底部	否	是	是	否	否

#兼容性说明

经过测试，发现除iOS Safari以外无法聚焦，iOS Webview可以自动聚焦，唤起键盘，其他的浏览器都可以正常autofoucs, 但是无法正常弹出键盘。必须要有用户的交互（触摸或者点击事件）