新版本IOS微信键盘收起后页面被遮挡 - WXOPEN Club

新版本IOS微信（6.7.4）键盘收起后页面被遮挡，select,input,textarea失去焦点时键盘位置页面元素被遮挡，滚动页面才会好，暂时的方案是代替用户做滚动操作处理，有么有更好的解决方案

XCode10打包引发的系统 Webview bug ，目前在等待苹果官方修复。

页面暂时修复方法可以监听键盘的收起事件，恢复一下页面。

下面是 stack overflow 的一个解决方案，可以参考一下。

/**

* iOS 12 bug for keyboard dismissing, view not restored ಠ_ಠ

*/

if (device.ios && device.osVersion.split('.')[0] >= 12) {

jQuery(document).delegate('input, textarea', 'blur', function(){

setTimeout(function(){

// did not work for me straight away without a small timeout ಠ_ಠ

jQuery('html').animate({height: '100.1vh'}, 100, function(){

// did not work for me with just one instruction with 100vh ಠ_ಠ

// the easing smooth doesn't work all the time properly ಠ_ಠ

jQuery(this).animate({height: '100vh'}, 1);

});

},100);

});

}

VUE 指令方法

// Vue指令，解决IOS软键盘关闭后，被撑起的页面无法回退到原来正常的位置

import Vue from 'vue';

Vue.directive('ios-bug-fixed', {

inserted(el) {

el.__reset_input_handler = () => {

window.scrollBy(0, -1);

setTimeout(() => {

window.scrollBy(0, 1);

}, 10);

}

el.addEventListener('focusout', el.__reset_input_handler);

el.addEventListener('blur', el.__reset_input_handler);

},

unbind(el) {

el.removeEventListener('focusout', el.__reset_input_handler);

el.removeEventListener('blur', el.__reset_input_handler);

delete el.__reset_input_handler;

}

});

使用

<cube-input class="input-item" v-ios-bug-fixed v-model="model.phone" placeholder="手机号" :maxlength="20"></cube-input>

还是有这个问题…, 现在的解决办法是

失去焦点的时候执行下这个

window.scroll(0, 0);