H5页面软键盘常见问题

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了H5页面软键盘常见问题相关的知识,希望对你有一定的参考价值。

一、需求:进入页面自动聚焦输入框,并弹出软键盘


实测

1、通过js执行focus(),安卓下只聚焦,出现光标,不弹出软键盘;ios下连光标都未出现。

2、增加autofocus属性,结果同上。

3、将代码放入延迟函数setTimeout 中执行,结果同上。

4、通过button点击执行focus(),文本框聚焦且弹出软键盘


解决方案:

1、通过点击屏幕的其他区域,然后触发input的focus事件,唤起键盘:

进入页面后,给页面加一层遮罩层,点击遮罩层时关闭该层并执行focus()。

2、重写input输入框及软键盘


二、问题:当输入信息时弹出软键盘,因手机屏幕有限汪汪会遮住输入框


解决方案:

scrollIntoViewIfNeeded只在当前元素在视窗的可见范围内不可见的情况下才滚动浏览器窗口或容器元素最终让当前元素可见。

当虚拟键盘弹出的时候,window的resize事件会被触发。

监听input元素的focus事件,以及window的resize事件。因为focus事件将在resize事件前触发。然后通过scrollIntoViewIfNeeded使输入框可见。


1、监听input元素的focus事件


var inputs = document.getElementsByTagName("input");
for (var i = 0; i< inputs.length; i++) {
    inputs[i].onclick = function (e) {
        window.setTimeout(function () {
            e.target.scrollIntoViewIfNeeded();
        }, 0);
    }
}



2、监听window的resize事件


if (/android/gi.test(navigator.userAgent)) {
    window.addEventListener(‘resize‘, function () {
        if (document.activeElement.tagName == ‘INPUT‘ || document.activeElement.tagName == ‘TEXTAREA‘) {
            window.setTimeout(function () {
                document.activeElement.scrollIntoViewIfNeeded();
            }, 0);
        }
    })
}



本文出自 “陈安一” 博客,请务必保留此出处http://dabaozi.blog.51cto.com/8032088/1923321

以上是关于H5页面软键盘常见问题的主要内容,如果未能解决你的问题,请参考以下文章

Android软键盘弹出,覆盖h5页面输入框问题

Android软键盘弹出,覆盖h5页面输入框问题

移动端H5软键盘的问题

解决微信H5页面软键盘弹起后页面下方留白的问题(iOS端)

H5页面在微信中页面被软键盘顶起来

#h5软键盘兼容方案