前端常见兼容问题系列8: 安卓机器中通过JS设置焦点无法拉起软键盘-CSDN博客

有时候，为了优化用户体验，做交互设计的同学可能会希望让输入框自动获得焦点并弹出软键盘，这样用户不用点击输入框就可以直接输入。的确，这对用户来说很方便。但真正用HTML5页面去实现的时候，却遇到了问题。

首先我做了这样一个demo。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no, address=no, email=no, time=no">
    <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0">
    <title>Title</title>
    <style>
        #input1{
            width: 200px;
            line-height: 30px;
        }
    </style>
</head>
<body>
    <input id="input1" type="text">
    
    <script>
        document.getElementById('input1').focus();
    </script>
</body>
</html>

在iOS的机器上试验，可以实现需求。但在多台安卓机器上测试时，都发现无法拉起来软键盘。

接着我尝试了给input输入框加上autofocus属性、或者给 document.getElementById('input1').focus();加上延时执行，也都无效。

之后，我又尝试把<input id="input1" type="text">换成一个<div contenteditable="true" id="input1"></div>，再用JS控制它自动获得焦点，事实证明也是无效的。

最后找到一个可以部分解决问题的办法，就是通过一个按钮的click()方法去触发input框的focus()方法。代码清单如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no, address=no, email=no, time=no">
    <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0">
    <title>Title</title>
    <style>
        #input1{
            width: 200px;
            line-height: 20px;
            border: 1px solid #b2b2b2;
            padding: 5px;
        }
    </style>
</head>
<body>
    <input id="input1" type="text">

    <button id="btn">focus</button>

    <script>
        var btn = document.getElementById('btn');

        btn.onclick = function () {
            document.getElementById('input1').focus();
        }
    </script>
</body>
</html>

这个办法可以解决在点击一个按钮，不跳转页面的情况下打开一个弹层，让弹层中的输入框自动获得焦点并拉起软键盘的问题。注意，这里的点击按钮事件是需要手动触发的。如果不手动点击按钮，则即便用JS去触发按钮点击事件，也是不能拉起软键盘的。至于点击按钮后跳转到一个新页面的场景，用这种办法也是无法cover到的。

最后，顺便提一下，有一个方法可以在进入页面时就通过JS拉起软键盘，那就是进入页面时自动执行window.propmt()这个JS语句。遗憾的是，由于window.propmt()弹出的界面不可定制，实在太不美观，因而使用场景非常之有限。