## 问题描述:
最近在写移动端一个表单验证。用于要禁止下拉出现微信或者app浏览器显示默认信息。使用了fixed锁定页面,但是,但是在iOS下,input得到焦点调起键盘输入之后 ,页面input元素位置发生偏移。导致内容输入会出现问题+页面卡顿。最开始想到blur时,改变position值为fixed,focus为static;然鹅,不管用哇。。。
### 问题原因:
查阅资料后,算是有个小答案了,不过有待考证哈。。猜测在iOS中,当你点击input准备输入时,虚拟弹窗弹出。整个视窗的高度就会变成减去键盘的高度。加上我们的父元素加上了fixed,就会整体上移.
### 解决方案:
> 锁定页面js:
在mounted加入事件监听,加上.passive修饰符。由于touchmove的默认行为是滚动当前页面或者缩放页面,所以我们要阻 止,锁定页面。让他静止不动,这里说下passive;
> passive:
但是浏览器无法知道一个监听器会不会调用preventDefault(),它能做的只有等待监听器执行完之后再去执行默认行为。而监听器是要耗时的,有时会很明显。会导致页面卡顿。其实上80%的滚动不会阻止默认行为,也就是说浏览器白等了。passive出来后。他就可以在两个线程里同时执行监听器中
的js代码和浏览器的默认行为了。
具体大家可以参考。这位大神的文章,由于addEventListener和正常事件的区别时不会前后覆盖。会同时执行,并且他接受3个参数:事件名+作出处理+(capture: Boolean, passive: Boolean, once: Boolean})
>css:
css部分,我们最外层父级相对定位。页面form和logo绝对定位。此处需要特别注意。当你input调起iOS软键盘,输入之后,页 面高度并不会自动下移,会出现空白,
需要触发才会恢复原来的样子。
这里需要在用到input的地方添加blur事件,使用
window.scrollTo(0, 0)**;将其位置恢复原状。
最后,算是解决啦,那个,就是使用正常布局+passive修饰符+scrollTo。解决的问题。