码迷,mamicode.com
首页 > 移动开发 > 详细

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

时间:2018-08-02 15:05:37      阅读:345      评论:0      收藏:0      [点我收藏+]

标签:https   www   document   blank   使用   and   methods   scrollto   收获   

前言:

 并没有完美解决 !

场景:

 最近在做企业微信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 被软键盘方案遮盖问题解决

标签:https   www   document   blank   使用   and   methods   scrollto   收获   

原文地址:https://www.cnblogs.com/wyhlightstar/p/9406386.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!