/// jquery
$('input,textarea').on('blur', function() {
var ua = navigator.userAgent.toLowerCase();
if(/micromessenger/.test(ua)) {
if(/iphone|ipad|ipod/.test(ua)) {
var currentPosition, timer;
var speed = 1;
timer = setInterval(function() {
currentPosition=document.documentElement.scrollTop || document.body.scrollTop;
currentPosition-=speed;
window.scrollTo(0,currentPosition);
currentPosition+=speed;
window.scrollTo(0,currentPosition);
clearInterval(timer);
}, 1);
}
}});
一、案例1
/// vue
Vue.directive('iosbugscroll', {
inserted: function(el, binding, vnode) {
var ua = navigator.userAgent.toLowerCase();
if(/micromessenger/.test(ua)) {
if(/iphone|ipad|ipod/.test(ua)) {
// input、textarea被组件包装的场景
const childInput = el.getElementsByTagName('input');
const childTextarea = el.getElementsByTagName('textarea');
for (let i = 0; i < childInput.length; i++) {
childInput[i].onblur = function temporaryRepair() {
setTimeout(function() {
checkWxScroll();
}, 200);
};
}
for (let i = 0; i < childTextarea.length; i++) {
childSelect[i].onblur = function temporaryRepair() {
setTimeout(function() {
checkWxScroll();
}, 200);
};
}
// input、textarea中的场景
el.onblur = function temporaryRepair() {
setTimeout(function() {
checkWxScroll();
}, 200);
};
}
}
}});
function checkWxScroll() {
var currentPosition, timer;
var speed = 1;
timer = setInterval(function() {
currentPosition=document.documentElement.scrollTop || document.body.scrollTop;
currentPosition-=speed;
window.scrollTo(0,currentPosition);
currentPosition+=speed;
window.scrollTo(0,currentPosition);
clearInterval(timer);
}, 1);}
//使用
<input type="text" v-iosbugscroll />
二、案例2 实际使用
mounted(){
//判断是IOS还是Android
var userAgent = navigator.userAgent;
var isAndroid =
userAgent.indexOf("Android") > -1 || userAgent.indexOf("Adr") > -1; //android终端
var isiOS = !!userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
// console.log(isAndroid, isiOS);
const innerHeight = window.innerHeight;
window.addEventListener("resize", () => {
if (document.activeElement.tagName == "INPUT") {
//延迟出现是因为有些 Android 手机键盘出现的比较慢
window.setTimeout(() => {
document.activeElement.scrollIntoViewIfNeeded();
}, 100);
}
if (isAndroid) {
const newInnerHeight = window.innerHeight;
if (innerHeight > newInnerHeight) {
// 键盘弹出事件处理
this.sureClass = "static";
this.velCodeFocus = true;
} else {
// 键盘收起事件处理
this.sureClass = "";
this.velCodeFocus = false;
this.selectBlur()
}
}
});
if (isiOS) {
window.addEventListener("focusin", () => {
// 键盘弹出事件处理
this.sureClass = "static"; //如果底部有按钮则改变布局 static 原先fixed
this.velCodeFocus = true;
});
window.addEventListener("focusout", () => {
// 键盘收起事件处理
this.sureClass = ""; //如果底部有按钮则改变布局 static 原先fixed
this.velCodeFocus = false;
this.selectBlur()
});
}
},
directives: {
focus: {
inserted: function(el, { value }) {
el[value ? "focus" : "blur"]();
},
//更新判断
update: function(el, { value }) {
el[value ? "focus" : "blur"]();
},
//更新完成s
componentUpdated: function(el, { value }) {}
}
},
// 使用
<input placeholder="请输入" v-focus="velCodeFocus" v-model="velCode" />
解决ios微信端失焦键盘隐藏后,被顶起的页面不回弹问题
最新推荐文章于 2020-11-27 15:56:03 发布