iOS软键盘调用遮挡问题及软键盘撑起的页面无法正常回退到原来位置BUG解决方案

不念不忘少年蓝@ 2022-04-22 20:30 507阅读 0赞

最近在写一个h5，大家都知道，移动端开发嘛，兼容问题是经常会遇到的，尤其是iOS，本人已经无力吐槽了。

虽然移动端安卓和iOS大部分内容都是兼容的，但是iOS还是有一些地方与安卓还是很有差异的，所以在开发过程中个人建议大家将iOS不兼容部分独立出来做处理。

今天本人就碰到了一个iOS的特殊bug，是输入框调起软键盘后输入框fixed定位失效被软键盘遮挡，发送消息过后软键盘占用部分无法正常回退的bug（6.7.4版本之后才会出现）

web.isIOS = function() {
            var isIphone = window.navigator.userAgent.toLowerCase().indexOf("iphone")>-1;
            var isIpad = window.navigator.userAgent.toLowerCase().indexOf("ipad")>-1;
            return isIphone || isIpad;
        }

以上方法是我用来检测iOS的方法

聊天信息代码

<template>
    	<div id="secretMsg" ref="scrollEle">
    		<ul class="secretMsgs" @click="inputBlur">
    			<li v-if="item.type==1" v-for="item in list">
    				<img class="secretMsgPhoto" :src="org.Logo" alt="" />
    				<div class="myTime">{
       {item.createdAt}}</div>
    				<p class="secretMsgContent">
    					{
       {item.msg}}
    				</p>
    			</li>
    			<li v-else class="formMe">
    				<img class="secretMsgPhoto" :src="avatarUrl" alt="" />
    				<div class="myTime">{
       {item.createdAt}}</div>
    				<p class="secretMsgContent">
    					{
       {item.msg}}
    				</p>
    			</li>
    		</ul>
    		<form action="javascript:return true" class="secretMsgbottomBtn">
    			<input ref="commitInput"  type="text" placeholder="请输入您的问题..." name="" id="" v-model="commitVal"/>
    			<div class="secretMsgbutton"  @click="msgEnter">发送</div>
    		</form>
    	</div>
    </template>
    <script>
    	export default {
    	  name: 'message',
    	  data () {
    	    return {
    	    	 	avatarUrl:localStorage.getItem("avatarUrl") || "",
    	      	displayName:localStorage.getItem("displayName") || "",
    	    		commitVal:"",
    	    		orgId:"",
    	    		org:{},
    	    		intervalMsg:null,
    	    		list:[],
    	    		lastMsgTime:"1970-09-06 14:18:11"
    	  		}
    		},
    	  mounted:function(){
    	  	this.orgId = this.$route.query.orgId
    	  	this.getPrivateMsg(10000);
    	  	this.overLook();
    	  	this.intervalMsg = setInterval(this.getPrivateMsg,3000);
    	  	this.axios.get("/api"//接口信息
    				  	,{
    				  		params:{
    				  			orgid:this.orgId
    				  		}
    				  	}
    			  	).then((res)=>{
    			  		this.org = res.data.data;
    			  		this.$emit("setTitle",res.data.data.OrgName)
    			  	});
    	  },
    	  beforeDestroy:function(){
    	  		clearInterval(this.intervalMsg);
    	  		this.intervalMsg=null;
    	  },
    	  destroyed:function(){
    	  	this.axios.get("/api").then((res)=>{//接口信息
    	  		if(res.data.code==0){
    	  			web.setCookie('unread',res.data.data.unread)
    	  		}
    	  	})
    	  },
    	  methods:{
    	  	overLook:function(){
    	  		this.axios.put("/api",{//接口信息
    	  			type:'2',
    	  			org:this.orgId,
    	  			user:localStorage.getItem("userId")
    	  		}).then((res)=>{
    	  			
    	  		})
    	  		
    	  	},
    	  	getPrivateMsg:function(num){//获取私信列表
    	  		this.axios.get("/api",{//接口信息
    	  		params:{
    	  			page:1,
    	  			limit:num||20,
    	  			type:2,
    	  			org:this.orgId,
    	  			user:localStorage.getItem("userId")
    	  		}
    		  	}).then((res)=>{
    		  		if(res.data.code==0){
    		  			   var lastMsgTime = this.lastMsgTime
    			  		   var newMsg =	res.data.data.items.filter(function(i){//看看有没有新消息
    			  				return (new Date(i.createdAt.replace(/\-/g, "/")).getTime() - new Date(lastMsgTime.replace(/\-/g, "/")).getTime()) > 0
    			  			})
    		  		   if(newMsg.length>0){
    		  		   		this.overLook();
    		  				window.setTimeout(()=>{//滚动到聊天信息底部
    			            	 		this.$refs.scrollEle.scrollTop = this.$refs.scrollEle.scrollHeight
    			         	},300)
    		  				this.list = [...this.list,...newMsg];
    				  		this.list.sort(function(a,b){
    				  			return new Date(a.createdAt) - new Date(b.createdAt)
    				  		})
    				  		this.lastMsgTime = this.list[this.list.length-1].createdAt
    		  		   }
    		  			
    		  		}
    		  	});
    	  	},
    	  	msgEnter:function(){//发送新消息
    	  		if(this.commitVal.Trim()==""){
    	  			return;
    	  		}
    	  		this.axios.post("/api",{//接口信息
    	  			type:2,
    	  			user:localStorage.getItem("userId"),
    	  			org:this.orgId,
    	  			msg:this.commitVal
    	  		}).then((res)=>{
    	  				if(res.data.code==0){
    	  					this.commitVal = "";
    	  					this.getPrivateMsg();
    	  					this.$refs.commitInput.blur();
    	  					window.setTimeout(()=>{
    			            	 		this.$refs.scrollEle.scrollTop = this.$refs.scrollEle.scrollHeight
    			         	},300)
    	  				}
    	  				
    	  		})
    	  	}
    	  }
    	}
    </script>

如果不做任何处理，安卓是正常的，但是iOS会偶而的出现软键盘遮挡住输入框的情况，而且iOS（6.7.4之后）就会出现输入框失去焦点后软键盘占用部分无法正常回退到底部的bug。

本人的处理是将输入框部分的iOS聚焦部分单独处理

方法：让页面滚动条跟随页面高度自动滚动（设置定时器是为了让软件盘的调用流畅）

iosInputFocus:function(){//处理iOS软键盘遮挡输入框
    	if(web.isIOS()){
    	  	setTimeout(()=>{
    			document.body.scrollTop=document.body.scrollHeight
    		 },400)
    	}
    },

同样的软键盘占用部分也是一个道理，本人的处理是在聚焦的时候设置值来监测用户输入，然后监听这个值的改变来控制页面滚动条的位置。

watch:{//处理iOS6.7.4之后软键盘关闭后页面无法回退到原来正常的位置
    	 userInput: function( val ){
    	       if(val){
    		        setTimeout(()=>{
    					document.body.scrollTop=document.body.scrollHeight
    				},400)
    	       }else{
    		       setTimeout(()=>{
    					document.body.scrollTop=document.body.scrollHeight
    				},400)
    	       }
    	  }
    },
    methods:{
        iosInputFocus:function(){//处理iOS软键盘遮挡输入框
              this.userInput=true
              if(web.isIOS()){
    	      setTimeout(()=>{
    		     document.body.scrollTop=document.body.scrollHeight
    	      },400)
    	 }
        },
        msgEnter:function(){//发送新消息
                this.userInput=false
    	  		if(this.commitVal.Trim()==""){
    	  			return;
    	  		}
    	  		this.axios.post("/api/privateMsg",{
    	  			type:2,
    	  			user:localStorage.getItem("userId"),
    	  			org:this.orgId,
    	  			msg:this.commitVal
    	  		}).then((res)=>{
    	  				if(res.data.code==0){
    	  					this.commitVal = "";
    	  					this.getPrivateMsg();
    	  					this.$refs.commitInput.blur();
    	  					window.setTimeout(()=>{
    			            	 		this.$refs.scrollEle.scrollTop = this.$refs.scrollEle.scrollHeight
    			         	},300)
    	  				}
    	  				
    	  		})
    	  	}
    }

以上就是本人对iOS软键盘调用回退失效bug的处理，有过有大佬有其他方案请多多指教。