解决登录时手机键盘遮挡登录按钮的问题

解决登录时手机键盘遮挡登录按钮的问题

问题背景：

​ 如下图所示，因为手机型号的不同，部分机型会出现手机键盘把验证码输入框下方的登录按钮给遮挡的问题。目前只有部分的安卓机型出现这种情况。

解决方案:

​ 思路是这样子的。既然该页面被挡住了，那么我让需要被显示的元素(登录按钮Button)滚动到浏览器窗口的可视区域内即可。

​ 在Andriod下，我们可以借助Element.scrollIntoView()。我们可以把scrollIntoView() 的第一个参数设为 false，意思是元素的底端将和其所在滚动区的可视区域的底端对齐，具体可以查看 MDN 的文档。

​ 实现代码如下：我是将被遮挡的Button元素增加标签id为"loginButton"，获取到该元素，当输入框触发聚焦的函数onFocus()将该元素滚动到可视区的底端。我这边还用了还用setTimeout()做了一个延迟，因为键盘弹出是有动画的，如果立即执行scrollIntoView() 有时候输入框还是会被挡住。

// 当输入框有焦点时触发函数,给登录按钮增加scrollIntoView
    const onFocus =() => {
        let loginButton = document.querySelector('#loginButton');
        document.hasFocus() && setTimeout(() => {
            loginButton.scrollIntoView(false)
        }, 300)
    }

​ 如下图所示，在每一个Input输入框内引用该函数即可。

​

​ 记得要给被显示的元素加上id。