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

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

首先我做了这样一个demo。

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

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

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

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

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

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