在开发vue移动端项目的时候,ios手机开启了‘摇动以撤销’功能,导致单页面项目在上一个页面input框获取焦点并输入文字后直接后退,此时摇手机触发‘撤销键入’弹框,而在新页面无input输入框,用户体验性不好。
对于为何页面销毁后还会存在input焦点事件,若有大神知道望不吝赐教,谢谢!
对此我的解决办法便是,在每一次路由切换前,本页面的input全部blur,注意我并不是在destroyed
或者deactivated
中处理的,如果这样的话就会写很多的代码。
而我是在beforeEach
路由导航守卫这里处理的:
router.beforeEach((to, from, next) => {
// ios‘撤销键入’弹框提示处理
let input = document.getElementsByTagName('input');
for (const item of input) {
item.blur();
}
...
}