input、textarea和select 微信在输入框弹出键盘后,页面下方有空白(IOS)
2019-07-11 15:04
856 查看
输入或下拉选择后均会出现以上问题
1、如果使用jquery,修改起来就比较方便
[code]//添加到初始化的地方即可 $('input, textarea, select').on('blur',function(){ window.scroll(0, 0); });
2、如果使用vue,要修改的地方不是很多的话,直接用vue的v-on添加blur事件即可,以input为例
[code]//html中添加 <input type="text" @blur="fixScroll" placeholder="xxx"/> //js methods中添加方法: fixScroll() { window.scrolll(0, 0); }
如果修改的地方比较多,建议使用addEventListener循环添加事件,在组件销毁记得remove就好,以input为例
[code]mounted() { var a = document.getElementsByTagName('input'); for (let i = 0; i < a.length; i++) { a[i].addEventListener('blur', this.fixScroll); } }, destroyed() { ...移除mounted中添加的事件...} methods: { fixScroll() { window.scrolll(0, 0); } }
3、因为这个问题只出现在ios端,所以可以在添加事件前判断是不是在ios系统上运行
[code]//判断当前设备为安卓OR苹果 //第一种 var m = navigator.userAgent; var isAndroid = m.indexOf('Android') > -1 || m.indexOf('Adr') > -1; //android终端 var isIos = !!m.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端 if (isIos) { //为input、textarea、select添加blur事件 } //第二种 function detect(){ var equipmentType = ""; var agent = navigator.userAgent.toLowerCase(); var android = agent.indexOf("android"); var iphone = agent.indexOf("iphone"); var ipad = agent.indexOf("ipad"); if(android != -1){ equipmentType = "android"; } if(iphone != -1 || ipad != -1){ equipmentType = "ios"; } return equipmentType; }
相关文章推荐
- IOS input输入时弹出键盘挤压页面,使页面失去焦点解决方法
- 【转】swift实现ios类似微信输入框跟随键盘弹出的效果
- 【WeChat】微信页面弹出键盘后iframe内容变空白
- 【移动端H5开发】iOS下页面底部的input被弹出键盘遮挡问题
- IOS 固定定位底部input输入框,获取焦点时弹出的输入法键盘挡住input
- 记录H5页面IOS中input输入框失去焦点后,键盘隐藏
- Swift 实现 iOS 类似微信输入框跟随键盘弹出的效果
- iOS下Html页面中input获取焦点弹出键盘时挡住input解决方案—scrollIntoView()
- swift实现ios类似微信输入框跟随键盘弹出的效果
- swift实现ios类似微信输入框跟随键盘弹出的效果
- iOS下Html页面中input获取焦点弹出键盘时挡住input解决方案—scrollIntoView()
- 微信页面弹出键盘后iframe内容变空白的解决方案
- H5微信页面开发 IOS系统 input输入框失去焦点,软键盘关闭后,被撑起的页面无法回退到原来正常的位置,导致弹框里的按钮响应区域错位
- ionic在开发ios系统微信时键盘挡住输入框的解决方法(键盘弹出问题)
- [Cordova/Phonegap] Cordova iOS 应用在第三方输入法的键盘弹出(点击输入框)时,页面不上移,导致输入框被键盘遮挡 的解决办法
- swift实现ios类似微信输入框跟随键盘弹出的效果
- iOS下Html页面中input获取焦点弹出键盘时挡住input解决方案
- 移动端中点击input弹出的键盘输入框会覆盖页面底部
- iOS下Html页面中input获取焦点弹出键盘时挡住input解决方案
- ionic在开发ios系统微信时键盘挡住输入框的解决方法(键盘弹出问题)