有时候,为了优化用户体验,做交互设计的同学可能会希望让输入框自动获得焦点并弹出软键盘,这样用户不用点击输入框就可以直接输入。的确,这对用户来说很方便。但真正用 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">
,再用 JS 控制它自动获得焦点,事实证明也是无效的。
- <div contenteditable="true" id="input1"></div>
最后找到一个可以部分解决问题的办法,就是通过一个按钮的
方法去触发 input 框的
- click()
方法。代码清单如下所示:
- 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 拉起软键盘,那就是进入页面时自动执行
这个 JS 语句。遗憾的是,由于
- window.propmt()
弹出的界面不可定制,实在太不美观,因而使用场景非常之有限。
- window.propmt()
来源: https://yq.aliyun.com/articles/65165