当前位置: 首页 > Web前端 > CSS

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

时间:2023-03-30 19:13:19 CSS

关于我们的QQ问答交流群:600633658我们的链接:知乎掘金今日头条新浪微博前端网四物简书B站IOS微信/支付宝Input输入框获取焦点失败解决方法://在input上绑定点击事件(以vue为例)@click.capture.stop.prevent="test($event)"//强制事件中的焦点e.target.focus()处的白条IOSInput弹出键盘后底部无法恢复。Android没有这个问题但是根容器的高度会变小。解决方案:设置最外层的盒子为'浮动层'Postoion:fixed;Top:0;Bottom:0;左:0;右:0;当IOSInput获得焦点时,页面会放大。IOS中的最小网络字体大小为16px。如果小于16px,页面会放大。解决方法:font-size>=16px当IOSInput获得焦点时,页面移动。当Input获得焦点时,弹出的键盘页面会向上滑动,当失去焦点时,页面'表面返回',但其实际dom并没有恢复,这将导致页面点击错误!解决方法:当失去焦点时,用js控制回到页面顶部window.scrollTo(0,0);以上问题都是在实际开发过程中遇到的,在实际测试中都有解决方案。如果有任何错误,请随时提出建议。如果还有其他的坑,欢迎分享