移动端input自动弹出输入法总结
本文由 小茗同学 发表于 2016-06-29 浏览(6152)
最后修改 2016-06-29 标签：移动端 input

总结

1、添加了autofocus的标签的input虽然能自动聚焦，但是输入法不会自动弹出：

<input id="input" type="input" autofocus/>

2、自动执行、添加了延时器等情况下也是一样，可以聚焦但是输入法无法弹出：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <title>input测试</title>
    <style type="text/css">
    body{font-family: 'Microsoft Yahei'; font-size: 16px; background: white; margin: 0; padding: 0;}
    #wrapper{position: absolute;bottom:10px;}
    </style>
</head>
<body>
    input测试
    <div id="wrapper">
        <input id="input" type="input"/>
    </div>
    <a href="javascript:focus();">立即聚焦</a>
    <a href="javascript:focusDelay();">延时1秒聚焦</a>
    <script src="http://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
    <script type="text/javascript">
    function focus()
    {
        document.getElementById('input').focus();
    };
    function focusDelay()
    {
        setTimeout(function()
        {
            document.getElementById('input').focus();
        }, 1000);
    };
    </script>
</body>
</html>

以上代码，点击 立即聚焦 会弹出输入法（但是input的位置还有一些问题，不会自动跑到输入法的上面，直接点击input会自动跑到输入法的上面），点击 延时1秒聚焦 会聚焦，但是输入法不会弹出。另外，放在jQuery的animate的完成callback里面也是一样，会聚焦但不会弹出。