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

xiaoxiao2026-03-26 7

有时候，为了优化用户体验，做交互设计的同学可能会希望让输入框自动获得焦点并弹出软键盘，这样用户不用点击输入框就可以直接输入。的确，这对用户来说很方便。但真正用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()弹出的界面不可定制，实在太不美观，因而使用场景非常之有限。