移动端那些戳中你痛点的软键盘问题及解决方法

avatar
前端工程师 @公众号:ELab团队

问题

问题描述:

在ios手机中,当页面中包含有输入框时,点击输入框,键盘弹起,会让页面中被fixed的元素失效。所以造成了底部吸底和顶部吸顶的元素错位的问题。下面的视频中就出现了这个问题,吸顶元素被推到可视区之外去了,而吸底元素也被推到了键盘之上。

Gif 如下:

1.gif

ui希望优化的点:

一开始,ui针对这个视频中出现的问题,提出了3个优化点:

1、希望吸顶元素能够继续吸顶

2、希望吸底元素能够继续吸底

3、希望当键盘弹起之后,输入框能够保持在键盘之上48px的距离

最终决定优化的点:

经过一番调研,在我搜集到的可行方法中,结合有限的时间因素,在和ui协调之后,将这3个优化点变成了下面这3个优化点。同时还参考网上文章,增加了一些特殊情况下可能出现问题的优化点。

1、吸顶元素能够继续吸顶

2、吸底元素(也就是按钮)能够在键盘弹出之后,出现在键盘的上方

3、键盘弹起,输入框出现在可视区内。(对于这点,ios本身是支持的,但是安卓却并不会主动让输入框出现在可视区域内)

4、对于部分ios系统下的部分微信webview内,发现软键盘收起时,滚动上去的页面没有滚动下来,造成了下面区域留出了一片灰色的区域。

先要弄懂的问题

解决这些问题之前,需要弄明白以下2个问题:

1、当键盘弹起来的时候,会发生什么

这里ios和安卓系统下表现的并不一致。这个参考了朱雷大佬提供的这个文章:WebView上软键盘的兼容方案

IOS 软键盘弹起表现

在 IOS 上,输入框(input、textarea 或 富文本)获取焦点,键盘弹起,页面(webview)并没有被压缩,或者说高度(height)没有改变,只是页面(webview)整体往上滚了,且最大滚动高度(scrollTop)为软键盘高度。

Android 软键盘弹起表现

同样,在 Android 上,输入框获取焦点,键盘弹起,但是页面(webview)高度会发生改变,一般来说,高度为可视区高度(原高度减去软键盘高度),除了因为页面内容被撑开可以产生滚动,webview本身不能滚动。

IOS 软键盘收起表现

触发软键盘上的“收起”按钮键盘或者输入框以外的页面区域时,输入框失去焦点,软键盘收起。

Android 软键盘收起表现

触发输入框以外的区域时,输入框失去焦点,软键盘收起。但是,触发键盘上的收起按钮键盘时,输入框并不会失去焦点,同样软键盘收起。

image.png

image.png

2、为什么fixed会失效

既然ios键盘弹起时,页面会上移,那么为什么fixed会失效呢。

这里参考这篇文章:ios键盘难题与可见视口(visualViewport)api

当时ios设计者考虑到一个问题:当键盘弹起时,页面无法感知到键盘的存在。那么,如果将要输入的目标(即「输入框」,例如 input、textarea 或一般的 contenteditable 元素)正好被弹起的键盘遮住,体验不会很糟糕吗?

为了解决这个问题,ios设计者们让webview上滚,但滚动的结果有些出乎意料:输入框本身可以理解地滚动到了实际可视区域的正中间,但 fixed 元素不会发生重新计算,而是保持原来的相对位置,跟着输入框一起被上推;在滚动过程中,还会允许屏幕底部超出页面底部(「滚动过头」),以便让输入框尽可能露出来。收起键盘后,「滚动过头」的部分会被弹回,fixed 元素发生重新计算,但页面并不会回到与打开键盘前相同的位置。

3、怎么监听键盘弹起和收起的动作

既然是键盘弹起来造成的问题,那么解决这个问题必然需要监听键盘弹起和收起的动作,那怎么监听呢。同样参考这篇文章:WebView上软键盘的兼容方案

综合上面键盘弹起和收起在 IOS 和 Android 上的不同表现,我们可以分开进行如下处理来监听软键盘的弹起和收起:

Ios

在 IOS 上,监听输入框的 focus 事件来获知软键盘弹起,监听输入框的 blur 事件获知软键盘收起。在 Android 上,监听 webview 高度会变化,高度变小获知软键盘弹起,否则软键盘收起。

// IOS 键盘弹起:当输入框被聚焦时IOS键盘会被弹起
  inputRef?.current?.addEventListener('focus', function () {
    // IOS 键盘弹起后操作
  }, false)

  // IOS 键盘收起:当点击输入框以外区域或点击收起按钮,IOS输入框都会失去焦点,键盘会收起,
  inputRef?.current?.addEventListener('blur', () => {
    // IOS 键盘收起后操作
  })

android

在 Android 上,监听 webview 高度变化,高度变小获知软键盘弹起,否则软键盘收起。

useEffect(() => {
    const { isAndroid } = Util.getOS('');
    let originHeight = document.documentElement.clientHeight || document.body.clientHeight;
    const handelAndroidResize = throttle(() => {
        const resizeHeight =
            document.documentElement.clientHeight || document.body.clientHeight;
        if (originHeight < resizeHeight) {
            // Android 键盘收起后操作
        } else {
            // Android 键盘弹起后操作
        }
        originHeight = resizeHeight;
    }, 300);

    if (isAndroid) {
        window.addEventListener('resize', handelAndroidResize, false);
    }

    return () => {
        if (isAndroid) {
            window.removeEventListener('resize', handelAndroidResize, false);
        }
    };
  }, []);

解决办法

下面就开始一一对上面说的问题进行分析解决:

1、吸顶元素能够继续吸顶

这个问题因为键盘弹出ios和安卓的处理方式不同,这个现象就只发生在ios系统中。

当时找了一圈方法,觉得并没有合适的解决方法,退而求其次,既然h5无没有办法很好的解决吸顶问题,那么这个能力不如就用客户端的能力好了,客户端的header不属于webview内容,自然webview上推时,客户端的header就还是吸顶状态。

我们当时的情况下,客户端的jsb能力只能够支持简单的一个返回按钮加一个居中标题作为header。所以有右上角的“历史评价”就不能够直接用jsb能力写,所以只能和ui同学商量,将原本的设计方案改一下。变成如下设计,就能够使用jsb能力写header了。

衍生问题:

但这样引出了一个新的问题:在安卓系统下的app端,会有底部按钮被遮挡的问题。

GIF 如下:

2.gif

衍生问题解决办法

之前header头用的是前端自己写的header时,没有这个问题,推测是因为安卓手机在键盘弹起时的webview高度缩短为整个屏幕的高度减去键盘的高度, 在之前的实现中,由于使用沉浸式header,所以前端webview高度就是整个屏幕的高度,而现在由于采用的是客户端jsb能力,所以webview剩余高度就需要减去header头的高度。所以解决办法就是让键盘弹起时,添加吸底按钮以及底部元素的margin-bottom为header的高度就行。

2、吸底元素(也就是按钮)能够在键盘弹出之后,出现在键盘的上方

对于这个问题,因为安卓表现是webview缩小,所以在安卓上并不存在这个问题,对于ios,因为ios向上滚动的距离最大是键盘的高度,但是也有可能滚动距离不是键盘高度,导致吸底按钮会被遮挡。

可见 GIF 如下:

RPReplay_Final1620886689.gif

解决办法:

让键盘弹起来的时候,让输入框加入scrollIntoView(true);方法。这其实可能只适用于我这种情景,这个解决办法的原理是:scrollIntoView(true)想让输入框的顶部滚动到与可视区顶部齐平的效果,但是由于ios键盘弹起之后最大滚动距离等于键盘的高度,所以,通过这个方法会让webview滚动距离等于ios键盘的高度,达到了吸底按钮吸底的效果。

3、键盘弹起,输入框出现在可视区内。(对于这点,ios本身是支持的,但是安卓却并不会主动让输入框出现在可视区域内)

这个简单,让元素滚动到可视区内,直接用scrollIntoView(true)方法就好。

4、ios软键盘收起时页面不能自然滑落

对于部分ios系统下的部分微信webview内,发现软键盘收起时,滚动上去的页面没有滚动下来,造成了下面区域留出了一片灰色的区域。其实这是 Apple 在 IOS 的 bug,会出现在所有的 Xcode10 打包的 IOS12 的设备上。微信官方已给出解决方案(点击查看)。

问题gif:

videoCacheAB76944E-B51D-4FB2-89FC-D5EF2079C6CC.gif

如图所示:

image.png

解决办法:

当键盘收起时,加入下面其中一种办法就可以解决

  1. 滚动到顶部
window.scrollTo(0,0)
  1. 滚动到底部
window.scrollTo(0, Math.max(document.body.clientHeight, document.documentElement.clientHeight));

本场景代码

const handleIosInputBlur = () => {
    // IOS 键盘收起后操作
    // 微信浏览器版本6.7.4+IOS12会出现键盘收起后,视图被顶上去了没有下来
    const wechatInfoRe = /MicroMessenger\/([\d\.]+)/i;
    const wechatInfo = wechatInfoRe.exec(window?.navigator?.userAgent);
    const wechatVersion = wechatInfo && wechatInfo.length > 1 && wechatInfo[1];

    const osInfoRe = /OS (\d+)_(\d+)_?(\d+)?/i;
    const osInfo = osInfoRe.exec(navigator.appVersion);
    const osVersion = osInfo && osInfo.length > 1 && osInfo[1];

    if (!wechatVersion || !osVersion) {
        return;
    }
    const height = Math.max(document.body.clientHeight, document.documentElement.clientHeight);
        if (Number(wechatVersion.replace(/\./g, '')) >= 674 && Number(osVersion) >= 12) {
            window.scrollTo(0, height);
        }
    };

最终效果:

Ios

4.gif

安卓

5.gif

参考文章:

WebView上软键盘的兼容方案

js如何获取iOS键盘高度

移动端input“输入框”常见问题及解决方法

ios键盘难题与可见视口(visualViewport)api

❤️ 谢谢支持

以上便是本次分享的全部内容,希望对你有所帮助^_^

喜欢的话别忘了 分享、点赞、收藏 三连哦~。

欢迎关注公众号 ELab团队 收货大厂一手好文章~