移动端 Web 页 input 控制软键盘

从交互层面上来讲，完成一个功能（获得想要的信息）的过程称之为用户路径。用户路径越长，完成功能的复杂度就越高，用户体验也就越差。因此当打开一个需要用户填写信息的表单界面时，为了提高可用性，PC 端一般会将光标聚焦到对应输入框（input），移动端也是同理，让对应的 input 获得 focus 状态，唤起软键盘，方便用户直接输入。
本文暂且不论 PC 端的场景，在移动端（iOS、Android）实现这个看似不起眼的效果其实是需要经过一番折腾，我们慢慢往下看以下三种常用场景。

一、当进入表单页时，让软键盘自动打开

这个需求比较常见，但是也是最棘手的。讲科学的话，我们可以直接在 JS 里获取 input ，给它 focus 下就搞定了。但是这在移动端浏览器里是行不通的。。
另外，H5 提供了 autofocus 属性，这个属性的兼容性在 caniuse 上显示并不支持 iOS Safari，Android 也是要到 4.4 才开始支持，因此我们可以忽略这个属性，不过下文会再次提到这个属性。
因此在 iOS 里想要在页面 load 完成后自动聚焦 input，打开键盘目前来讲不是很现实。
最难过的是 Android 也不行，目前进行了简单的测试系统浏览器和 App 内嵌 WebView，H5 中的 input 是聚焦状态，但是无法唤起键盘，键盘，键盘。。。
场景一，暂时无解......（下文提到在 Hybrid App 中可以实现）

二、当点击页面中某个元素唤起软键盘

这个相对于场景一，多了用户交互这一步。那么这样是不是就可以使用 JS 在 iOS 上成功的唤起键盘了呢？答案是肯定的。

<!-- HTML -->
<input id="input" type="text"