H5页面软键盘常见问题-创新互联

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

创新互联公司是一家专注于成都网站制作、成都做网站与策划设计,潮南网站建设哪家好?创新互联公司做网站,专注于网站建设十余年,网设计领域的专业建站公司;建站业务涵盖:潮南等地区。潮南做网站价格咨询:18980820575

实测

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);
        }
    })
}

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

本文标题：H5页面软键盘常见问题-创新互联
分享地址：http://cdkjz.cn/article/jghhh.html