您的位置:首页 > 移动开发 > 微信开发

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;
}

 

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐