ios端输入键盘收起后页面不回弹或底部留白
/** * 文件来源:https://www.codeprj.com/blog/9c3f8e1.html */ const { react } = require("babel-types"); // 1. 非框架搭建的页面 const windowHeight = window.innerHeight input.addEventListener('blur', function () { let windowFocusHeight = window.innerHeight if (windowHeight == windowFocusHeight) { return } console.log(windowHeight + '--' + windowFocusHeight); console.log('修复'); let currentPosition; let speed = 1; //页面滚动距离 currentPosition = document.documentElement.scrollTop || document.body.scrollTop; currentPosition -= speed; window.scrollTo(0, currentPosition); //页面向上滚动 currentPosition += speed; //speed变量 window.scrollTo(0, currentPosition); //页面向下滚动 }) // 2. vue指令代码 const windowHeight = window.innerHeight Vue.directive('fixedInput', function (el, binding) { el.addEventListener('blur', function () { let windowFocusHeight = window.innerHeight if (windowHeight == windowFocusHeight) { return } console.log(windowHeight + '--' + windowFocusHeight); console.log('修复'); let currentPosition; let speed = 1; //页面滚动距离 currentPosition = document.documentElement.scrollTop || document.body.scrollTop; currentPosition -= speed; window.scrollTo(0, currentPosition); //页面向上滚动 currentPosition += speed; //speed变量 window.scrollTo(0, currentPosition); //页面向下滚动 }) }) // 3. Vue 在全局添加 // 先写一个mixin,fixedInput.js /** 1 export default { 2 data() { 3 return { 4 windowHeight: 0 5 } 6 }, 7 mounted() { 8 this.windowHeight = window.innerHeight 9 }, 10 methods: { 11 temporaryRepair() { 12 let that = this 13 let windowFocusHeight = window.innerHeight 14 if (that.windowHeight == windowFocusHeight) { 15 return 16 } 17 console.log(that.windowHeight + '--' + windowFocusHeight); 18 console.log('修复'); 19 let currentPosition; 20 let speed = 1; //页面滚动距离 21 currentPosition = document.documentElement.scrollTop || document.body.scrollTop; 22 currentPosition -= speed; 23 window.scrollTo(0, currentPosition); //页面向上滚动 24 currentPosition += speed; //speed变量 25 window.scrollTo(0, currentPosition); //页面向下滚动 26 }, 27 } 28 } 在 App.vue 中引用 1 <template> 2 <div id="app"> 3 <router-view /> 4 </div> 5 </template> 6 <script> 7 import fixedInput from '@/mixins/fixedInput' 8 export default { 9 name: 'app', 10 mixins: [fixedInput], 11 updated() { 12 // 解决ios输入框弹出的页面样式问题 13 document.querySelectorAll("input").forEach(item => { 14 item.onblur = this.temporaryRepair; 15 }); 16 document.querySelectorAll("select").forEach(item => { 17 item.onchange = this.temporaryRepair; 18 }); 19 document.querySelectorAll("textarea").forEach(item => { 20 item.onblur = this.temporaryRepair; 21 }); 22 }, 23 } 24 </script> */ // 4. React中使用 /*判断客户端*/ export const judgeClient = () => { let u = navigator.userAgent; console.log('u',u) let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //判断是否是 android终端 let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //判断是否是 iOS终端 if(isAndroid){ return 'Android'; }else if(isIOS){ return 'IOS'; }else{ return 'PC'; } } /* render(){ return ( <Input allowClear maxLength={20} placeholder="请输入手机号" onBlur={this.handleBlur}/> ) } */ handleBlur = () => { if (judgeClient() === 'IOS') { const windowFocusHeight = window.innerHeight if (window.innerHeight === windowFocusHeight) { return } let currentPosition const speed = 1 // 页面滚动距离 currentPosition = document.documentElement.scrollTop || document.body.scrollTop currentPosition -= speed window.scrollTo(0, currentPosition) // 页面向上滚动 currentPosition += speed // speed变量 window.scrollTo(0, currentPosition) // 页面向下滚动 } }