html onblur ios,VUE添加自定义指令修复苹果iOS微信上输入框失焦后的页面错乱BUG

微信这BUG好久了，据说是浏览器的锅~~~

本来想用 @blur 事件，后来想想还是要多用用别的方法。

局部自定义指令

// *.vue写在data()同级

directives: {

drop: {

inserted: function (el) {

let userUA = navigator.userAgent;

if (userUA.indexOf('iPhone') > -1){

el.onblur = function(){

setTimeout(function(){

var scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0;

window.scrollTo(0, Math.max(scrollHeight - 1, 0));

},100)

}

}

}

}

},

或者全局定义指令

//main.js

Vue.directive('drop', {

inserted: function (el) {

let userUA = navigator.userAgent;

if (userUA.indexOf('iPhone') > -1){

el.onblur = function(){

setTimeout(function(){

var scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0;

window.scrollTo(0, Math.max(scrollHeight - 1, 0));

},100)

console.log(userUA)

}

}

}

})

然后给页面的input和select加上指令 v-drop

以前做H5没用VUE的时候，是用的下面的代码

//记得引入JQ

let userUA = navigator.userAgent;

if (userUA.indexOf('iPhone') > -1){

$("input,select").blur(function(){

setTimeout(function(){

var scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0;

window.scrollTo(0, Math.max(scrollHeight - 1, 0));

},100)

})

}