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