IOS下 input 被软键盘方案遮盖问题解决

2022-10-17 21:22:04

前言：

　并没有完美解决！

场景：

　最近在做企业微信H5的一个项目，里面有个动态列表页，开始输入框是隐藏的，点击评论才会出现并让 input 聚焦。经过测试在安卓上面应该没什么问题，但是iOS上面会出现 input 被软键盘遮盖或者半遮盖、甚至发送按钮不能点击的状况。

　总的来说问题有点小严重。

查阅百度：

　好的，百度一搜，哇！解决方案很多，我就放心的去抽了一根烟，想着分分钟完事。BUT 经过试验百度 “ios 下input 被软键盘遮盖” 前两页没有一个能解决我的问题的！！！

　不过收获还是有的... 参考文章如下（写了三个比较可以的吧）

　https://blog.csdn.net/github_37533433/article/details/66471962

　https://juejin.im/post/5b0401b2f265da0b71569ca0

　https://www.cnblogs.com/wx1993/p/6059668.html

解决（Vue）：

　因为 iOS 下软键盘弹出并不会改变窗口高度所以也就没试监听 window 的 resize 事件。

　第（n-2）次是在输入框获取焦点的时候：

// 输入框获得焦点
    onFocus(){
      var that = this;
      setTimeout(function(){
        that.sendText.scrollIntoView(true);
        that.sendText.scrollIntoViewIfNeeded();
      },100);
    },

　scrollIntoView(true)：滚动浏览器窗口或容器元素，以便在当前视窗的可见范围看见当前元素。

　有效果，但是还是会有问题，偶尔还是会出现半遮盖的情况 iPhone6 尤为明显。

　第（n-1）次是使用的滚动到底部的方法，因为项目的动态列表是有分页的，所以适当的改了一下。

created(){
    var u = navigator.userAgent;
    this.isAndroid =u.indexOf("Android") > -1 || u.indexOf("Adr") > -1; //Android终端
    this.isIOS =!!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //IOS终端

  },
methods:{
    // 输入框获得焦点
    onFocus(){
      var that = this;
      this.bfscrolltop = document.body.scrollTop; // 记录当前位置
      if(this.isIOS){
        setTimeout(function(){
          document.body.scrollTop = document.body.scrollTop*1 + 200;
        },300)
      }

    },
},

　在点击发送的时候设置： document.body.scrollTop = this.bfscrolltop;

问题：

　1、在监听失去焦点的时候设置 document.body.scrollTop = this.bfscrolltop 是点不了发送的（这就触及到我知识的盲区了）

　2、ios 不管型号（可能除了SE）第一次点击评论还是可能会出现半遮盖，或者全遮盖的情况。

　第n次是在点击评论的时候加了一个定时器（我不知道为什么这样写就好了！）

created(){
    var u = navigator.userAgent;
    this.isAndroid =u.indexOf("Android") > -1 || u.indexOf("Adr") > -1; //Android终端
    this.isIOS =!!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //IOS终端

  },
methods:{
    // 点击评论
    commentClick(index){
      var that = this;
      if(this.isIOS){
        setTimeout(function(){
          document.body.scrollTop = document.body.scrollTop*1 + 300;
        },300)
      }
      that.$refs.import_inp.focus();
    },
    // 输入框获得焦点
    onFocus(){
      var that = this;
      this.bfscrolltop = document.body.scrollTop; // 记录当前位置
      if(this.isIOS){
        setTimeout(function(){
          document.body.scrollTop = document.body.scrollTop*1 + 200;
        },300)
      }

    },
    // 输入框失去焦点
    changeBlur(){
      var that = this;
      // input 输入框 内无内容的情况下点击ios软键盘的完成是可以回去的
      if(this.inputVal == ""){
        document.body.scrollTop = this.bfscrolltop;
      }
    },
    // 点击发送
    sendComment(){
        document.body.scrollTop = this.bfscrolltop;
    },
},

　注：以上代码只是关于input输入框被遮盖的。

　目前在 iPhone7 iPhone6 iPhoneSE 上没什么问题

问题：

　1、当输入框内有内容的时候，关掉软键盘是不能返回记录的位置的

总结：

　目前只能解决到这个地步了。黔驴技穷。

　有什么好的解决方案还望看到的朋友指点一二。

　根据自己的项目问题选择一个尽可能最好的方法解决

IOS下 input 被软键盘方案遮盖问题解决

码农公寓

相关文章