ios输入框的坑(软键盘弹出不灵敏、输入法影响弹出高度)

vvpvvp 发布于2019-08-26 10:56 / 4120人阅读

摘要：参考地址首先，是这样的布局父容器里面放一个输入框和一个按钮思路是父容器定位，为，为布局在其他事件触发输入框出现的时候例如一个评论的，父容器值变为，被软键盘顶上来。

参考地址：

https://segmentfault.com/a/11...
https://blog.csdn.net/github_...

1.首先，是这样的布局：父容器里面放一个输入框和一个按钮

思路是：父容器fixed定位，bottom为0，left为-100%；flex布局；在其他事件触发输入框出现的时候（例如一个评论的icon），父容器 left值变为0，被软键盘顶上来。

    
     
     发送        



.ipt-box {
    position: fixed;
    left: -100%;
    bottom: 0;
    width: 100%;
    z-index: 9999999;
    display: flex;
    align-items: center;

    &.iptfcs {
        left: 0;
    }
}

好吧，结果是根本顶不上来！需要多加一层父容器！

2.其次，是这样的布局：父容器---父容器---输入框+按钮


    
         
         发送
    



.ipt-box {
    position: fixed;
    left: -100%;
    bottom: 0;
    width: 100%;
    z-index: 9999999;

    &.iptfcs {
        left: 0;
    }

    .ipt-box-cont{
        width: 100%;
        display: flex;
        align-items: center;
    }
}

这样做，终于是顶上来了。点击评论icon，showCipt 设置为true后，this.$refs.ctxt.focus() 聚焦准备书写。但是ios出现点击聚焦不灵敏的情况！需要强制聚焦！

3.打开fastclick插件，将focus方法加入一行，强制聚焦：

   FastClick.prototype.focus = function(targetElement) {
        var length;
        if (deviceIsIOS && targetElement.setSelectionRange && targetElement.type.indexOf("date") !== 0 && targetElement.type !== "time" && targetElement.type !== "month") {
            length = targetElement.value.length;
            targetElement.focus();  //新增这一行
            targetElement.setSelectionRange(length, length);
        } else {
            targetElement.focus();
        }
    };

这下点击一次就可以聚焦了，而且经过我的iphone7系统输入法测试，没有出现什么问题，当我切换搜狗输入法后，悲剧又发生了，遮挡一半！！换了xr测试,完全遮挡！！！！

4.输入法兼容问题有哪些

确实大部分 Android 浏览器是没问题的，但是测试在 IOS 上，UC 浏览器配合原生输入法和第三方输入法（比如搜狗输入法），输入框都会被完全挡住；QQ 浏览器或微信浏览器，配合第三方输入法，输入框会被遮住一半；百度浏览器配合第三方输入法输入框也会被完全遮住。

5.软键盘弹起，在安卓上是缩小了内容区域的高度，软键盘将下半部分进行遮挡；ios上则是整个webview整体上移，改变了整个内容区域的scrollTop值。

经过筛选，最终选择使用定时器，思路如下：

点击触发input-------------在获取焦点（软键盘弹起）前，先将页面的scrollTop值存起来-------
------获取焦点------------判断浏览器类型--------如果是ios，设置定时器，将此时内容的高度值赋值给浏览器当前滚动高度（确保完全显示）------
-----失去光标--------------判断浏览器类型------若为ios,清除定时器，并设置浏览器当前滚动高度值为一开始键盘未弹起的scrollTop值

//解决第三方软键盘唤起时底部input输入框被遮挡问题
    var bfscrolltop = document.body.scrollTop;//获取软键盘唤起前浏览器滚动部分的高度
    $("input.inputframe").focus(function(){//在这里‘input.inputframe’是我的底部输入栏的输入框，当它获取焦点时触发事件
        interval = setInterval(function(){//设置一个计时器，时间设置与软键盘弹出所需时间相近
        document.body.scrollTop = document.body.scrollHeight;//获取焦点后将浏览器内所有内容高度赋给浏览器滚动部分高度
        },100)
    }).blur(function(){//设定输入框失去焦点时的事件
        clearInterval(interval);//清除计时器
        document.body.scrollTop = bfscrolltop;将软键盘唤起前的浏览器滚动部分高度重新赋给改变后的高度
    });

应用在我的代码里面：

//点击评论icon，触发软键盘弹起
    commentFocus(cid) {
        let _this = this;
        _this.scrollerval = document.body.scrollTop;
        _this.showCipt = true;
        _this.$refs.ctxt.focus();
        if (navigator.userAgent.indexOf("iPhone") > -1||navigator.userAgent.indexOf("iPad") > -1){
            _this.timer = setInterval(function () {
                document.body.scrollTop = document.body.scrollHeight;
            },1000);
        }
    },

//失去光标
    resetipt() {
        let _this = this;
        _this.showCipt = false;
        if (navigator.userAgent.indexOf("iPhone") > -1 || navigator.userAgent.indexOf("iPad") > -1){
            clearInterval(_this.timer);
            document.body.scrollTop = _this.scrollerval;
        }
    },

当然，把浏览器类型存起来用更好啦！

然后，就可以洗洗睡了！！！

GPU云服务器云服务器输入界面软键盘 Android输入法弹出 jq弹出输入框 aspx 弹出输入框

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/106850.html

可能这些是你想要的H5软键盘兼容方案

摘要：然而，并没有直接监听软键盘的原生事件，只能通过软键盘弹起或收起，引发页面其他方面的表现间接监听，曲线救国。软键盘收起表现触发输入框以外的区域时，输入框失去焦点，软键盘收起。可以让软键盘弹起后，让焦点元素再次滚到可视区，强迫滚到位。前言最近一段时间在做 H5 聊天项目，踩过其中一大坑：输入框获取焦点，软键盘弹起，要求输入框吸附（或顶）在输入法框上。需求很明确，看似很简单，其实不然。从...

stackvoid 2019-08-23 17:05 评论0 收藏0
如何用 js 获取虚拟键盘高度？（适用所有平台）

摘要：前言这是一个存在很久的历史问题了，对于这样一个具有普遍性的问题浏览器偏偏没有给出解决方案，没有方案还聊个什么别急，别急，接下来我们一起来扒一扒关于软键盘高度和的问题我们先来看一个短片认识一下这个问题问题描述当操作者进行输入操作的时候，弹起的前言这是一个存在很久的历史问题了，对于这样一个具有普遍性的问题浏览器偏偏没有给出解决方案，what？没有方案还聊个什么？别急，别急，接下来我们...

terro 2019-08-22 10:54 评论0 收藏0
如何用 js 获取虚拟键盘高度？（适用所有平台）

摘要：前言这是一个存在很久的历史问题了，对于这样一个具有普遍性的问题浏览器偏偏没有给出解决方案，没有方案还聊个什么别急，别急，接下来我们一起来扒一扒关于软键盘高度和的问题我们先来看一个短片认识一下这个问题问题描述当操作者进行输入操作的时候，弹起的前言这是一个存在很久的历史问题了，对于这样一个具有普遍性的问题浏览器偏偏没有给出解决方案，what？没有方案还聊个什么？别急，别急，接下来我们...

Forest10 2019-08-01 17:26 评论0 收藏0
如何用 js 获取虚拟键盘高度？（适用所有平台）

摘要：前言这是一个存在很久的历史问题了，对于这样一个具有普遍性的问题浏览器偏偏没有给出解决方案，没有方案还聊个什么别急，别急，接下来我们一起来扒一扒关于软键盘高度和的问题我们先来看一个短片认识一下这个问题问题描述当操作者进行输入操作的时候，弹起的前言这是一个存在很久的历史问题了，对于这样一个具有普遍性的问题浏览器偏偏没有给出解决方案，what？没有方案还聊个什么？别急，别急，接下来我们...

li21 2019-08-29 13:11 评论0 收藏0