# 一. h5的各种兼容问题
# 场景一、h5在iPhone6（版本12.x）上面，输入框唤起软键盘，失焦后出现卡白屏
# 解决方案
- 1.1 在main.ts里面全局自定义指令
...
// 当input 失焦时，滚动一下页面就可以使页面恢复正常
function checkWxScroll(el) {
setTimeout(() => {
el.scrollIntoView({
block: "end",
behavior: "smooth",
});
}, 300);
window.scrollTo(0, 0);
}
...
Vue.directive('iosbugfixed', {
inserted: function(el, binding, vnode) {
// 解决input、select被组件包装的场景
const childInput = el.getElementsByTagName('input');
const childSelect = el.getElementsByTagName('select');
for (let i = 0; i < childInput.length; i++) {
childInput[i].onblur = function temporaryRepair() {
checkWxScroll(el);
};
}
for (let i = 0; i < childSelect.length; i++) {
childSelect[i].onblur = function temporaryRepair() {
checkWxScroll(el);
};
}
// 正常场景
el.onblur = function temporaryRepair() {
checkWxScroll(el);
};
}
});
...
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
- 1.2 在具体模块里面加入对应指令:v-iosbugfixed
<input
v-iosbugfixed
type="text"
placeholder="请输入验证码"
class="inputverfiytext"
style="border: 0"
v-model="vImageCode"
autofocus="false"
autocomplete="off"
/>
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10