那些IOS系统中使用Input遇到的坑

10次阅读

共计 515 个字符,预计需要花费 2 分钟才能阅读完成。

关于我们
QQ 答疑交流群: 600633658
我们的链接:
知乎 掘金 今日头条 新浪微博 前端网 思否 简书 B 站
IOS 微信 / 支付宝 Input 输入框获取焦点失灵
解决方案:
// 在 input 上绑定 click 事件(以 vue 为例)

@click.capture.stop.prevent=”test($event)”

// 在事件中强制获取焦点

e.target.focus()

IOS Input 弹出键盘后底部白条无法复原问题
安卓没有此类问题但是会出现根容器高度变小
解决方案:
将最外层盒子设置为’浮动层’
Positoion: fixed;

Top: 0;

Bottom: 0;

Left: 0;

Right: 0;

IOS Input 获取焦点时页面放大
在 IOS 中 web 最小字号为 16px,小于 16px 则页面会放大
解决方案:
font-size >= 16px

IOS Input 获取焦点时页面移动问题
Input 获取焦点时,弹出键盘页面会向上滑动,当失去焦点时页面‘表面归位’,其实际 dom 却没有恢复, 就会导致页面点击错误!
解决方案:失去焦点时用 js 控制其返回页面顶部
window.scrollTo(0,0);

以上问题均为实际开发过程中所遇,解决方案实测可用,如有错误,欢迎提出。如有其他坑,欢迎分享

正文完
 0